Бутстрап-столбцы не выравниваются правильно

Я построил макет с помощью Bootstrap 3, и у меня есть следующая проблема: у меня есть раздел новостей, который отображает 9 новостных статей, по 3 в каждой строке, суммируя 3 строки. Однако, похоже, они не соответствуют должным образом. См. Рисунок ниже.

Columns not aligning correctly

html:

          <div class="row">
            <div class="col-md-12 small-article-container"><!-- Small articles container -->
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI AŞTEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA ee df PENTRU PREŞEDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA PENTRU PREŞEDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI AŞTEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA ee df PENTRU PREŞEDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA PENTRU PREŞEDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI AŞTEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA ee df PENTRU PREŞEDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA PENTRU PREŞEDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-12 more-news">
                <a href="#">MAI MULTE stiri</a>
              </div>
            </div>
          </div>

css:

.small-article-container {
margin-top: 1em;
}

.small-article {
/*  padding: 0;
*/  margin-bottom: 1em;
padding-right: 0.5em;
padding-left: 0.5em;
/*  float: right;
*/}

.small-category {
padding: 0;
font-size: 0.9em;
}

.small-article-img {
padding: 0;
width: 100%;
}

.small-article-date {
padding: 0;
padding-top: 0.5em;
font-size: 0.9em;
color: #545454;
}

.small-title {
padding: 0;
line-height: 1.3em;
font-size: 1em;
text-transform: uppercase;
}

.small-excerpt {
padding: 0;
font-size: 0.9em;
}

Может ли кто-нибудь угодить мне на этом? У меня есть кошмары об этом. Спасибо.

ОТВЕТЫ

Ответ 1

Ты так близко. Классы столбцов имеют атрибут float, установленный в стилях начальной загрузки, и ваш столбец плавает, а не там, где вы ожидаете. Этот средний столбец в 1-й строке предотвращает то, что вы видите, как плавающее в пустом пространстве, из упаковки правильно, потому что оно выше других. Все, что вам нужно сделать, это обернуть каждую группу из трех строк следующим образом:

<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>

Настройте его так, и вы готовы к работе.

Ответ 2

Очень поздно для этой вечеринки, однако, для кого-то еще, кто наткнулся на эту проблему:

Как j.burnette указанная упаковка каждые 3 .small-article (s) в классе .row решит эту проблему.

Вместо добавления дополнительного HTML только CSS можно было бы установить атрибут min-hight для .small-article:

.small-article {
    min-height: (height of largest .small-article)px;
}

Это будет зависеть от знания height самого высокого .small-article и установки этого как min-height. Вы должны убедиться в этом, основываясь на том, как вы создаете максимальную длину ваших изображений и текстовых выписок.

Если это нужно сделать более автоматизированным, вы можете использовать CSS и JS, чтобы получить высоту самого высокого окна, а затем применить min-height к вашему .small-article классы.

Для скорости вы всегда можете захватить вилку, чтобы сделать это за вас. Вот плагин jQuery, который я использую регулярно:

jquery.heightMatch.js

Я предполагаю, что jQuery доступен, когда вы используете BS3. Я не рекомендую использовать JS-плагины для таких небольших задач, но, скорее всего, у вас будет где-то еще на вашем сайте этот плагин, возможно, полезный для соответствия высот

Ответ 3

Старый вопрос, но у меня была такая же проблема.

Как упоминалось в комментариях @alex, разработчики Bootstrap рекомендуют использовать clearfix для этого. Эта ссылка ссылается на здесь, в котором обсуждается отзывчивый сброс столбцов с помощью clearfix div.

Вместо добавления дополнительного div для clearfix я просто выбрал элементы nth-of-type на основе количества столбцов на строку (три в этом случае) и очистил float от этих элементов. Он работает, если все элементы в строке имеют одинаковую ширину, что, по-видимому, имеет место здесь. Это сработало для меня.

В примере, представленном OP, CSS может выглядеть примерно так:

@media only screen and (@screen-md-min) {
    .small-article:nth-of-type(3n + 1) {
        clear: both;
    }
}

Ответ 4

Также позднее предложение - такая же проблема здесь с двумя столбцами, содержащими изображения одинаковой высоты. Из-за того, как генерируются divs, я не мог добавить clearfix для отдельных div и, добавив путем таргетинга на нечетные divs через css, это не сработало. Поэтому самым простым решением для меня было добавление дополнений к нечетным divs:

.col-md-6:nth-child(odd){padding-bottom:15px;}

Или, альтернативно, дать нечетным divs высоту, немного превышающую высоту изображения:

 .col-md-6:nth-child(odd){height:310px;}