twitter-bootstrap Bootstrap 列未正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22866109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap columns not aligning correctly
提问by Andrei P
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.
我已经使用 Bootstrap 3 构建了一个布局，但我遇到了以下问题：我有一个新闻部分，该部分设置为总共显示 9 个新闻项目，每行 3 个，总计 3 行。但是，它们似乎没有正确对齐。请看下面的图片。
The html:
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>
The css:
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.
有人可以帮我解决这个问题吗？我做噩梦了。谢谢。
采纳答案by j.burnette
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:
你离得那么近。列类在引导程序样式中设置了 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>
Set it up like that and you're ready to go.
像这样设置它，你就可以开始了。
回答by Richard Howell
Very late to this party, however, for anyone else who stumbles on this problem:
然而，对于任何偶然发现这个问题的人来说，这个聚会已经很晚了：
As j.burnettesaid wrapping every 3 .small-article(s) in a .rowclass will resolve this issue.
正如j.burnette所说，.small-article在一个.row班级中每 3 (s)包装一次将解决这个问题。
Instead of adding additional HTML a CSSonly approach would be to set a min-hightattribute for .small-article:
与添加额外的 HTML 不同，CSS 的唯一方法是为 设置一个min-hight属性.small-article：
.small-article {
min-height: (height of largest .small-article)px;
}
This would depend knowing the heightof the tallest .small-articleand setting this as the min-height. You should be able to ascertain this based on how you are generating your images and text excerpts maximum length.
这将取决于知道height最高的.small-article并将其设置为min-height. 您应该能够根据您生成图像和文本摘录最大长度的方式来确定这一点。
If it needs to be more automated you can use CSSand JSto obtain the height of the tallest box and then apply the min-heightto your .small-articleclasses.
如果需要更加自动化，您可以使用CSS和JS来获取最高框的高度，然后将其min-height应用于您的.small-article类。
For the sake of speed you can always grab a plug to do this for you. Here is a jQuery plugin I use regularly:
为了速度起见，您可以随时使用插头为您执行此操作。这是我经常使用的 jQuery 插件：
I assume jQuery is available as you are using BS3.I do not condone using JS plugins for such a small tasks, but chances are you will have somewhere else on your site this plugin maybe useful for matching heights
我假设 jQuery 在您使用 BS3 时可用。我不容忍使用 JS 插件来完成这么小的任务，但很有可能你的网站上还有其他地方这个插件可能对匹配高度有用
回答by neizan
Old question, but I just had the same issue.
老问题，但我只是遇到了同样的问题。
As @alex mentioned in comments, Bootstrap developers recommend using clearfixfor this. That link refers you to here, which discusses responsive column resets using a clearfix div.
正如@alex 在评论中提到的那样，Bootstrap 开发人员建议clearfix为此使用。该链接将您转至此处，该链接讨论了使用clearfix div.
Instead of inserting an extra divfor the clearfix, I just selected the nth-of-typeelements, based on the number of columns per row (three in this case), and cleared the float on those elements. It works if all elements in the row are the same width, which appears to be the case here. It worked for me.
我没有为 插入额外div的内容clearfix，而是nth-of-type根据每行的列数（在本例中为三）选择了元素，并清除了这些元素上的浮点数。如果行中的所有元素都具有相同的宽度，它就会起作用，这里似乎就是这种情况。它对我有用。
For the example given by the OP, the CSS might look something like this:
对于 OP 给出的示例，CSS 可能如下所示：
@media only screen and (@screen-md-min) {
.small-article:nth-of-type(3n + 1) {
clear: both;
}
}
回答by matt
Also late suggestion - same problem here with 2 columns containing images all the same height. Because of the way the divs are generated, I couldn't add a clearfix to individual divs and when added by targeting the odd divs via css, it didn't work. So the simplest solution for me was to add padding to the odd divs:
也是迟到的建议 - 这里有 2 列包含相同高度的图像的相同问题。由于 div 的生成方式，我无法为单个 div 添加清除修复，并且当通过 css 定位奇数 div 添加时，它不起作用。所以对我来说最简单的解决方案是向奇数 div 添加填充：
.col-md-6:nth-child(odd){padding-bottom:15px;}
Or alternatively give the odd divs a height slightly more than the image height:
或者，让奇数 div 的高度略高于图像高度：
.col-md-6:nth-child(odd){height:310px;}
