• Мерцает экран MacBook Pro 13 с тачбаром 2018. Проблему не решили?

    inoise
    @inoise
    Solution Architect, AWS Certified, Serverless
    У меня нет такой проблемы, хотя ноуту поболее будет. С флексом должны были решить - было удлинение на 2мм. Похоже на частный случай. Поскольку ноуту нет года - свозить на гарантию - пусть проверят и скажут что да и как
    Ответ написан
    7 комментариев
  • Как отключить перенос COL в Bootstrap 4 на планшетах?

    sharomet
    @sharomet
    Front-End

    <div class="py-5">
        <div class="container">
          <div class="row">
            <div class="col-3" style="margin-bottom: 30px">
              содержимое
            </div>
            <div class="col-3" style="margin-bottom: 30px">
              содержимое
            </div>
            <div class="col-3" style="margin-bottom: 30px">
              содержимое
            </div>
            <div class="col-3" style="margin-bottom: 30px">
              содержимое
            </div>
          </div>
        </div>
    </div>


    В этом примере у вас ничего не должно становится друг под друга.

    col-1, col-2, col-3, col-..12 - используется при разрешениях < 576. то есть при всех разрешениях эти блоки будут стоять 4 в ряд и не будут переносится на новую строку.

    Причины:
    Скорей всего если вы собирали css из scss самостоятельно то возможно вы не учли вендорные префиксы -webkit- и по этому не работает ничего на ios. нужно включить autoprefixer.
    Или
    Возможно вы подключили не все стили bootstrap 4 или у вас перетираются стили.

    https://getbootstrap.com/docs/4.3/layout/grid/

    Пример всё что больше 576 будут идти в ряд, при меньшем разрешении они будут становится стеком(друг под друга).
    mb-4 mb-sm-0 - это отступы(margin-bottom) https://getbootstrap.com/docs/4.3/utilities/spacing/
    <div class="py-5">
        <div class="container">
          <div class="row">
            <div class="col-sm-3 mb-4 mb-sm-0">
              содержимое
            </div>
            <div class="col-sm-3 mb-4 mb-sm-0">
              содержимое
            </div>
            <div class="col-sm-3 mb-4 mb-sm-0">
              содержимое
            </div>
            <div class="col-sm-3">
              содержимое
            </div>
          </div>
        </div>
    </div>


    и к стати float: left - тут вообще не должен работать, bootstrap использует flex
    Ответ написан
    1 комментарий