Bootstrap列未正确对齐
我使用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;
}
有人可以请你解决这个问题吗？我对此做了噩梦。感谢。
4 个答案:
答案 0 :(得分：11)
你这么近。列类在引导程序样式中设置了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>
像这样设置，你准备好了。
答案 1 :(得分：3)
然而，对于遇到这个问题的其他人来说，这个派对已经很晚了：
正如j.burnette所说，在.small-article课程中每3 .row个句子将会解决此问题。
除了添加额外的HTML， CSS 方法的唯一方法是为min-hight设置.small-article属性：
.small-article {
min-height: (height of largest .small-article)px;
}
这取决于了解最高height的{{1}}并将其设置为.small-article。您应该能够根据生成图像和文本摘录的最大长度来确定这一点。
如果需要更加自动化，您可以使用 CSS 和 JS 来获取最高框的高度，然后将min-height应用到您的{ {1}}课程。
为了速度，你总是可以抓住一个插头来为你做这件事。这是我经常使用的jQuery插件：
我认为当你使用BS3时，jQuery是可用的。 我不会宽恕使用JS插件来完成这么小的任务，但你可能会在你的网站上的其他地方使用这个插件可能对匹配高度很有用
答案 2 :(得分：1)
老问题，但我遇到了同样的问题。
正如@alex在评论中提到的，Bootstrap开发人员recommend using clearfix就是这样。该链接指向here，其中使用clearfix div讨论了响应列重置。
我没有为div插入额外的clearfix，而是根据每行的列数（本例中为3列）选择了nth-of-type元素，并清除了漂浮在那些元素上。如果行中的所有元素都具有相同的宽度，则它可以工作，这在这里就是这种情况。它对我有用。
对于OP给出的示例，CSS可能如下所示：
@media only screen and (@screen-md-min) {
.small-article:nth-of-type(3n + 1) {
clear: both;
}
}
答案 3 :(得分：0)
还有较晚的建议-这里有2列包含相同高度的图像的相同问题。由于div的生成方式，我无法为单个div添加一个clearfix，并且当通过css指向奇数div进行添加时，它不起作用。因此，对我而言，最简单的解决方案是在奇数div中添加填充：
.col-md-6:nth-child(odd){padding-bottom:15px;}
或者将奇数div的高度设置为略高于图像高度：
.col-md-6:nth-child(odd){height:310px;}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？