Почему при использовании col-sm-6 bootstrap криво рендерит страницу?

Question

[4c74356b41]

Добрый день, делаю сайт, есть такой код:

<div class="container">
        <div class="row">
            <p class="col-lg-12 col-md-12 text-center" style="font-size: 28px;">Header!</p>
            <p class="col-lg-12 col-md-12 text-center text-primary" style="font-size: 18px;">Subheader</p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-1 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
        </div>
    </div>

На всех разрешениях кроме sm все нормально, грид 12, я его не менял. на sm оно выглядит вот так:

х х
х х
  х
х

Есть идеи? Я как-то слабо представляю что не так...

Answer 1

[Bohdan Stadnyk]

col-lg-4 col-md-4 col-sm-6 col-sm-offset-1 text-center

= отступ слева в 1 блок т.е. 1 + 6 + 6 > 12 последняя 6-ка слезает вниз.

Answer 2

[4c74356b41]

тьфу ты, я скопипастил кусок кода когда экспериментировал с гридом. простите, я вам ответ засчитаю, поскольку Вы абсолютно правы, в том случае что я описал - да :) Моя ошибка, простите.

я нашел знакомого знакого, который сказал как сделать правильно в моем случае (нужно добавить clearfix'ов):

<div class="container">
        <div class="row">
            <p class="col-lg-12 col-md-12 text-center" style="font-size: 28px;">Header!</p>
            <p class="col-lg-12 col-md-12 text-center text-primary" style="font-size: 18px;">Subheader</p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <div class="clearfix visible-sm-block"></div>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <div class="clearfix visible-sm-block"></div>
            <p class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-1 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
            <p class="col-lg-4 col-md-4 col-sm-6 text-center">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true" style="font-size: 48px;"></span>
                <br />Text
            </p>
        </div>
    </div>