Не могу заставить бутстрап сетку адаптироваться нормально под мобильные и планшетные устройства в конкретном блоке. В чем дело?

Question

[larka_skaz]

Элементарно видимо, но у меня не получается. Может я ересь какую-то пишу, но все же в чем пробема? Есть блок с логотипами. Для больших экранов я разделила ширину на 6 одинаковых частей. Теперь я хочу что бы на смартфонах и планшетах было два ряда по три лого в каждом. Как этого добиться? Какие классы добавить?

<div class="jumbotron our-customers">
      <div class="container"> 
        <div class="col-md-12"><h2> Our customers</h2></div> 
        <div class="container">
        <div class="row">
          <div class="col-md-2 col-sm-4"><img src="img/logo-1.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-2.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-3.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-4.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-5.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-6.png" alt="#"></div>
        </div> 
        </div>
      </div> 
    </div>

Выглядит это так

Comments

[Персик]

А как сейчас выглядит на планшете?

Answer 1

[Михаил Лисецкий]

Не используйте col без row, при любом разрешении количество блоков во всех колонках в одном ряду должно быть равным 12.

Comments

[larka_skaz]

Так row же присутствует, или я чего то не понимаю?

[Михаил Лисецкий]

<div class="row">
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div>
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">2</div>
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div>
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">4</div>
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div>
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">6</div>
</div>

[larka_skaz]

Михаил Лисецкий: Спасибо, первый раз занимаюсь этим делом. Тупанула, спасибо, что помогли )

Answer 2

[Алексей Скляров]

У вас крайне извращенная верстка.
Я делаю вот так:

<div class="jumbotron our-customers">
      <div class="container"> 
<div class="row">
<div class="col-md-12"><h2> Our customers</h2></div> 
</div>
       
        <div class="row">
          <div class="col-md-2 col-sm-4"><img src="img/logo-1.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-2.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-3.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-4.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-5.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-6.png" alt="#"></div>
        </div> 
    </div>
 </div>

Вам сказали, что нужно col-md-* в .row держать, но там где заголовок у вас, .row как раз нет. так же я не понял зачем вы в контейнере создаете еще один контейнер. Поэтому и возникают проблемы. Листайте документацию.

Comments

[larka_skaz]

Больше спасибо за разъяснения. Буду дальше нагуливать бутсраповский жир )))