Бутстрап-столбцы не выравниваются правильно
Я построил макет с помощью 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;}
