引导列未正确对齐 [英] Bootstrap columns not aligning correctly
本文介绍了引导列未正确对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Bootstrap 3构建了一个布局，我有以下问题：我有一个新闻部分设置显示总共9个新闻项，每行3个，总计3行。然而，他们似乎没有正确对齐。请参阅下面的图片。
I've built a layout using Bootstrap 3, and I have the following problem: I have a news section that is set to display a total of 9 news items, 3 on each row, summing 3 rows. However, they don't seem to align properly. Please see the picture below.
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;
}
任何人都可以骗我吗？我对它有噩梦。谢谢。
Could anyone please hep me out on this ? I'm having nightmares about it. Thanks.
推荐答案
你这么近。列类具有在引导样式中设置的float属性，并且您的列是浮动的，而不是您期望的位置。第一行的中间列阻止了您看到在空白区域浮动的那个列，因为它比其他列更高而正确包装。所有你需要做的是包装每一组3在一行像这样：
You're so close. The column classes have the float attribute set in the bootstrap styles and your column is floating, just not where you expect it. That middle column in the 1st row is preventing the one you see floating off in the blank space from wrapping properly because it's taller than the others. All you need to do is wrap each group of 3 in a row like this:
<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>
这样设置就可以了。
这篇关于引导列未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
