Почему едет сетка bootstrap?

Question

[Анатолий Филиппов]

Привет! Скажите, а почему так может быть?


Код у меня стандартный:

<div class="row icon-wrapper">
            <!-- Icon block -->
            <div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="images/icon-5.png" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
...

Где то clear:both надо написать, или что то в этом духе?
Спасибо

Answer 1

[Илья Пирожок]

А что собственно нужно? у вас в ряду должно быть 3 или 4 блока?

Comments

[Анатолий Филиппов]

По 3 блока для экранов шире 991 (ну или сколько там у medium display)
Вот эти которые 2 пустых места блоки тупо уехали вниз. Они все inline-block

[Илья Пирожок]

У вас reset есть?

[Анатолий Филиппов]

kamikadze1996: нет, не подключал. Это который normalize.css ?

[Илья Пирожок]

Ну похоже немного) Есть два варианта: либо reset(сброс всех параметров во всех браузерах и дальше вы уже сами указываете свои отступы, поля, размер шрифта и т.д.) а есть normalize(тут похожее действие но он не сбрасывает а нормализирует все стили браузеров) тут уж вам самим выбирать.
Может у вас стоит дефолтный padding или margin для div?

Answer 2

[Захар Сторожук]

col-md-4 - блок будет занимать 4 часть 12 = 3 блока в ширину.

Comments

[Анатолий Филиппов]

Ну все правильно, мне и нужно. Причём такой глюк возникает только при ширине не выше 1200. Все медиа касательно этих блоков удалял - результат тот же. У меня было похожее, но когда были именно блоками а не инлайн элементами

Answer 3

[Владислав Бойченко]

При следующем коде (картинки использовал другие) лично у меня все работает. Это на дефолтном бутстрапе, без добавления своих стилей. Только отцентрировал вместимое блоков .icon. Поэтому могу смело утверждать, что вы сами своими стилями что-то подвинули, лучше перепроверьте.

<div class="row icon-wrapper">
            <!-- Icon block -->
            <div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
			<div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
			<div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
			<div class="col-md-4 col-sm-6 col-xs-12 icon scrollme">
              <span class="dark-hex animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-opacity="0" data-scale="2">
                <img src="http://www.placehold.it/100x100" alt="">
              </span>
              <h5 class="no-underline">Прямой звонок</h5>
              <p>Возможность позвонить прямо из мобильного приложения одним кликом, нет необходимости запоминать или записывать номер.</p>
            </div>
</div>

Comments

[Анатолий Филиппов]

Это все очень странно, но я починил тем что изменил в самом bootstrap.css

970px на 1020px

media (min-width:992px) {
.container {
width: 1020px
}
}

[Владислав Бойченко]

Анатолий Филиппов: я бы так не рисковал :D А на самом деле, это надо тестить, иначе как знать, как оно себя поведет? Вообще, я думаю парни из Bootstrap знали, что делают, и сетка их должна работать без изменений. Мое мнение, конечно же.

[Анатолий Филиппов]

Владислав Бойченко: это купленный шаблон и такой переделанный весь, мне честно вот не охота разбирать чужие заплатки. А с нуля переписывать его за этот бюджет как то не хочется. Например там у .row зачем то стояли отступы отрицательные. и двойной скролл появлялся на странице периодически, а на маленьких экранах они просто сделали overflow-x:hidden чтобы скрыть отступ справа вылезающий. Поправил как мог, но шаблон явно дешевый какой то

Answer 4

[Alex]

Вот такая же беда у меня. Пока думаю как бороться.
Видимо, выше есть еще несколько элементов. И один из них, по высоте меньше остальных ....

Comments

[Анатолий Филиппов]

Такую беду я min-height решаю давно уже, знаю что не гуд ибо не все понимают, но хотя бы просто)

[Alex]

Анатолий Филиппов: ну а если 2 остальных выше min-height? То 3й всеравно будет меньше