Как отключить перенос COL в Bootstrap 4 на планшетах?

Коллеги, приветствую.

При выводе страницы на планшете (конкретно у меня для тестов ipad a1416, вроде разрешение 2048x1536) DIV-ы столбцы (COL) переносятся, становятся друг под другом. А нужно в ряд, учитывая 12 возможных столбцов.

С помощью костыльного указания float: left у двух конкретных div-ов всё ок. Но таких div-ов полно и так с ума сойти можно.

Вот так - ок
<div class="col-sm-3" style="float: left">
     содержимое
</div>
<div class="col-sm-1" style="float: left"></div>
<div class="col-sm-8" style="float: left">
     содержимое
</div>
<div style="clear: both"></div>


Вот так становятся друг под друга
<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>


Как отключить эти переносы на устройствах больше смартфона?
  • Вопрос задан
  • 286 просмотров
Пригласить эксперта
Ответы на вопрос 1

<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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы