Html 引导列未正确对齐
我已经使用Bootstrap3构建了一个布局，我有以下问题：我有一个新闻部分，它被设置为显示总共9个新闻项，每行3个，总计3行。然而，它们似乎没有正确对齐。请看下面的图片 html：Html 引导列未正确对齐,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经使用Bootstrap3构建了一个布局，我有以下问题：我有一个新闻部分，它被设置为显示总共9个新闻项，每行3个，总计3行。然而，它们似乎没有正确对齐。请看下面的图片 html： <div class="row"> <div class="col-md-12 small-article-container"><!-- Small articles container --> <
<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>
谁能帮我解决这个问题吗？我在做噩梦。谢谢。你太接近了。列类在引导样式中设置了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>
@media only screen and (@screen-md-min) {
.small-article:nth-of-type(3n + 1) {
clear: both;
}
}
//这里的东西
//这里的东西
//这里的东西
//这里的东西
//这里的东西
//这里的东西
//这里的东西
//这里的东西
//这里的东西
像这样设置，您就可以开始了。但是，对于遇到这个问题的其他人来说，参加这个聚会已经很晚了： 如前所述，将每3个
。小文章。行中设置minhight
属性
.small-article {
min-height: (height of largest .small-article)px;
}
这取决于知道最高的小文章的高度，并将其设置为最小高度。你应该能够确定这一点的基础上，你是如何生成你的图像和文字摘录的最大长度
如果需要更加自动化，您可以使用CSS和JS获取最高盒子的高度，然后将min height
应用于您的。小文章
类
为了提高速度，你可以随时为自己插上插头。下面是我经常使用的jQuery插件：
我假设jQuery在您使用BS3时可用。
我不允许在这么小的任务中使用JS插件，但很可能你的网站上会有其他地方，这个插件可能对匹配身高很有用，但我也有同样的问题
正如@alex在评论中提到的，Bootstrap开发人员正在为此而努力。该链接向您介绍了如何使用clearfix div
重置响应列
我没有为clearfix
插入一个额外的div
，而是根据每行的列数（本例中为三列）选择了类型n的元素，并清除了这些元素上的浮动。如果行中的所有元素都具有相同的宽度，则该方法有效，这里的情况似乎就是这样。这对我有用
对于OP给出的示例，CSS可能如下所示：
<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>
@media only screen and (@screen-md-min) {
.small-article:nth-of-type(3n + 1) {
clear: both;
}
}
还有后期建议-这里有同样的问题，有两列包含高度相同的图像。由于div的生成方式，我无法向单个div添加clearfix，当通过css针对奇数div添加时，它就不起作用了。因此，对我来说，最简单的解决方案是在奇数div中添加填充：
.col-md-6:nth-child(odd){padding-bottom:15px;}
或者，为奇数div指定略大于图像高度的高度：
.col-md-6:nth-child(odd){height:310px;}
谢谢如果我这样设置，它们将在上方显示一个，每行显示一个。尝试将.col-sm-4添加到具有.col-md-4的每一个。如果未指定，引导将在点击某些媒体查询宽度时使用默认宽度。您可能还需要.col-xs-4。我将您所有的html复制到这个bootply中，它以行的形式显示它们。我确实在其中添加了.col-sm-4:Edit：由于限制，它不允许我保存，但使用元素包装所有行。我遇到了相同的问题，.row解决方案的问题是，换行符将被硬编码，如果不同分辨率的列数不同，它将不起作用。还有其他方法吗？目前还不知道，我前一段时间确实解决了这个问题，但我必须重新检查并查看引导开发人员推荐使用的。clearfix
：这个没有媒体查询块的解决方案适合我