1

Не могу понять, как в бутстрапе расположить 6 элементов. Хочу чтобы на мобильных они были в 3 ряда, а на декстопах в 2.

Если делаю так:

<div class="row">
 <div class="col-xs-6 col-md-4">...</div>
 <div class="col-xs-6 col-md-4">...</div>
 <div class="col-xs-6 col-md-4">...</div>
 <div class="col-xs-6 col-md-4">...</div>
 <div class="col-xs-6 col-md-4">...</div>
 <div class="col-xs-6 col-md-4">...</div>
</div>

То, на декстопах 4 элемент из-за того, что там float left, подтягивается в притык к 3му. Как решается в бустрапе этот вопрос?

скрин

1
  • 1
    Приведите вашу верстку с учетом <div class="row">, пожалуйста. И по возможности - приложите скриншот, где у вас едет верстка. 20 авг 2016 в 10:50

1 ответ 1

0

Классы lgи xs забыли + если блоки все разной высоты, то рекомендую использовать clearfix:

<div class="row">
 <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">...</div>
 <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">...</div>

 <!--Clearfix to Blockes in a Row -->
 <div class="clearfix visible-lg-block"></div>
 <div class="clearfix visible-md-block"></div>

 <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">...</div>

 <!--Clearfix to Blockes in a Row -->
 <div class="clearfix visible-sm-block"></div>
 <div class="clearfix visible-xs-block"></div>

 <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">...</div>

 <!--Clearfix to Blockes in a Row -->
 <div class="clearfix visible-lg-block"></div>
 <div class="clearfix visible-md-block"></div>

 <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">...</div>
 <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">...</div>
</div>

И по возможности используйте container-fluid.

1
  • 1) col-xs-4 работает и на широком экране, пока не включится col-md-6, поэтому достаточно col-md-6 col-xs-4; 2) вместо <div class="clearfix visible-lg-block"></div><div class="clearfix visible-md-block"></div> лучше <div class="clearfix visible-lg-block visible-md-block"></div>; 3) ряду положено лежать в контейнере, иначе он создаёт горизонтальную прокрутку на странице; 4) три ряда на мобиле - это две колонки, т.е. нужно всё-таки col-xs-6 col-md-4 и по другому распределить блоки с clearfix. 20 авг 2016 в 15:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.