Padding ломает сетку bootstrap, как пофиксить?

Question

[bbeight]

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-6">
                    <div class="post"></div>
                </div>
                <div class="col-md-6">
                    <div class="post"></div>
                </div>
                <div class="col-md-6">
                    <div class="post"></div>
                </div>
                <div class="col-md-6">
                    <div class="post"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <!-- Here's sidebar -->
        </div>
    </div>
</div>

Есть такая структура, если задаю padding: 10px; для .post или для параграфа внутри .post, то сетка ломается, предпоследний блог слетает вниз, кто знает как задать отступ и не cломать верстку, я тут не силён. И да, знаю что не очень информативно, надеюсь этого хватит :)

Answer 1

[Сергей delphinpro]

Зачем вы врёте? https://jsfiddle.net/f8rtwxe9/
UPD https://jsfiddle.net/f8rtwxe9/2/

Comments

[iBird Rose]

он видимо про это https://jsfiddle.net/f8rtwxe9/1/

[Сергей delphinpro]

iBird Rose: Поражаюсь вашим телепатическим способностям =)
bbeight тогда так https://jsfiddle.net/f8rtwxe9/2/

[bbeight]

Сергей: Спасибо, работает, так а почему такое происходит? типа надо заворачивать эти дивы в row, если в сумме получается 12?

[Сергей delphinpro]

bbeight: ну углубляясь в теорию и объясняя "по детски": колонки в бутстрапе имеют стиль float: left
В примере https://jsfiddle.net/f8rtwxe9/1/ первая колонка по высоте больше второй, поэтому когда третья уплывает влево, она "спотыкается" об эту длинную колонку. Что бы не спотыкалась, нужно задать ей стиль clear:left что дает ей указание опустится ниже всех float:left блоков
Мы берем селектор nth-child(2n+1) и задаем им этот стиль. Запись означает "каждый второй блок, начиная отсчет с первого". т.е. третий, пятый, и т.д.
Используем медиазапросы, чтобы очистка работала только для md колонок.

[Сергей delphinpro]

*не углубляясь

[bbeight]

Сергей: большое спасибо за помощь :)

Answer 2

[sergey]

Значит не правильно заданы стили для post, Bootstrap и его сетка тут абсолютно ни при чем.
Просто padding никак не влияет на сетку, он прежде всего влияет на блоки post, их ширину, высоту.

Comments

[bbeight]

да там и нет никаких стилей, только margin-top и padding

[sergey]

bbeight: в смысле нет? что из себя представляет Ваш тег .post? Он что пустой?

[sergey]

bbeight: вы прописали col-md-6, он по умолчанию 50% ширины от col-md-9, из этого следует что .post должен быть по ширине не больше этих 50% вот и все

Answer 3

[iBird Rose]

у тебя 4 col-md-6 элемента. которые float left; так не должно быть. либо задавай им отдельный row. либо ставь clearfix.
через clearfix - так https://jsfiddle.net/f8rtwxe9/3/