我使用Bootstrap 3构建了一个布局，但遇到以下问题:我有一个新闻部分，该部分设置为总共显示9个新闻项，每行3个，总计3行。但是，它们似乎无法正确对齐。请看下面的图片。
的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;
}
有人可以帮我吗？我对此有噩梦。谢谢。
最佳答案
你好亲近列类在引导样式中设置了float属性，并且您的列是 float 的，而不是您期望的位置。第一行的中间一列阻止您看到的那一列漂浮在空白区域中，因为它比其他列高。您需要做的就是将每3个小组包装成一行，如下所示:
<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>
这样设置，就可以开始了。