Как исправить padding у nested column в Bootstrap?

Question

[dhat]

При сужении экрана до размеров xs, все колонки становятся в ряд, но у тех что nested вылазит косяк в виде бокового padding. Я понимаю что можно это перезаписать своим css, но вероятно есть что-то предусмотренное самим Бутстрапом в таких случаях? Заранее сорри если читал инструкцию невнимательно, но не нашел ответа там.

codepen.io/dhatt/pen/mAWAOb?editors=1000

Answer 1

[Сергей delphinpro]

Как правильно верстать с помощью bootstrap?

Главное помнить, что .row не должен быть непосредственным потомком .row, между ними обязательно должен быть .col-*-*. То же самое касается и колонок

Answer 2

[#rybak]

Родителем любого "col-..." должен быть "row"
у вас сейчас:

<div class="row">
   <div class="col-lg-6 col-sm-6">
      <div class="col-lg-12 col-sm-12"> ...</div>
      <div class="col-lg-12 col-sm-12"> ...</div>
    </div>
 </div>

а должно быть:

<div class="row">
   <div class="col-lg-6 col-sm-6">
      <div class="row">
         <div class="col-lg-12 col-sm-12"> ...</div>
         <div class="col-lg-12 col-sm-12"> ...</div>
      </div>
    </div>
 </div>

одна из функций "row" - это компенсировать те самые отступы по бокам за счет отрицательного margin слева и справа.

Comments

[dhat]

Спасибо за исчерпывающий ответ!