正如您在下面的图片中看到的,我的内容不是均匀排列的。有没有办法在Bootstrap中均匀对齐我的内容?例如,我希望我的图像全部在每列上对齐。我不介意段落和图像之间是否有空白区域。如何在引导中将我的内容在3列上均匀对齐?
回答
使用一个单独的.row
DIV当前.row
下面的图片,并把同一种用相同的类列/分隔在那里,你目前有文字和图像。
嗨Johannes,谢谢你的回复。我也在考虑这个,但是这不会影响响应式堆栈吗?说如果我从移动视图看网站,内容堆叠不会按顺序排列,图像将全部显示最后? – jacketmargiela
是真的。因此,您可以在每列中放置两个div,并给第一个固定的高度(即三个高度相同),这个高度足以包含最高的一个。 – Johannes
谢谢Johannes。是的,我假设我必须得到这个结果。我只是觉得有一个魔术般地解决这个问题的引导类:D虽然都很好,但会使用你的建议。再次感谢! – jacketmargiela
使用框架的.thumbnail
组件(带.caption
)可以完成@Johannes建议如下图所示,包括加入自己的高度与.caption
像下面。确保您根据需要调整高度。
.caption{
min-height: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo sapien vitae turpis pellentesque tempus. Nunc vehicula cursus ultricies. Sed aliquam hendrerit sapien quis blandit. Nam tempus condimentum nunc ac.</p>
</div>
<img src="http://lorempixel.com/300/300" alt="placeholder image">
</div>
</div>
<!-- 2 -->
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tincidunt justo. Morbi ligula felis, accumsan eu auctor a, vulputate vel justo. Integer sapien nulla, rutrum at metus quis, rutrum porta risus. Vestibulum pulvinar metus nec luctus
euismod. Vivamus faucibus libero non magna vulputate laoreet.</p>
</div>
<img src="http://lorempixel.com/300/300" alt="placeholder image">
</div>
</div>
<!-- 3 -->
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec dui tellus. In imperdiet erat eros, sit amet scelerisque ante efficitur bibendum. Quisque tempor diam.</p>
</div>
<img src="http://lorempixel.com/300/300" alt="placeholder image">
</div>
</div>
</div>
得讨厌downvotes没有解释为什么? :/ – ochi
好吧,这是我碰到的早期与基于浮动的网格系统工作时的一个问题。
这里有一个如何在引导与您当前的电网系统解决问题的草图:http://jsbin.com/yolewusuza/
@media screen and (min-width: 992px) {
.content {
position: absolute;
top: 0;
left: 15px;
right: 15px;
bottom: 0;
}
.col-sm-4:after {
padding-bottom: 170%;
content: '';
display: block;
}
.content .image {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videsne quam sit magna dissensio? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quamvis enim depravatae non sint, pravae tamen esse possunt. Negat enim summo bono afferre
incrementum diem. Laboro autem non sine causa; Minime vero istorum quidem, inquit. Duo Reges: constructio interrete.</p>
<div class="image">
<img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&h=150">
<p>Image description text</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="content">
<h3>Heading</h3>
<p>Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Ut in geometria, prima si dederis, danda sunt omnia. Potius inflammat, ut coercendi magis
quam dedocendi esse videantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Omnes enim iucundum motum, quo sensus hilaretur. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?</p>
<div class="image">
<img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&h=150">
<p>Image description text</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="content">
<h3>Heading</h3>
<p>Quae est igitur causa istarum angustiarum? Vestri haec verecundius, illi fortasse constantius. Ego vero volo in virtute vim esse quam maximam; Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. An dubium est, quin virtus ita
maximam partem optineat in rebus humanis, ut reliquas obruat? Negat esse eam, inquit, propter se expetendam. O magnam vim ingenii causamque iustam, cur nova existeret disciplina! Perge porro.</p>
<p>In qua quid est boni praeter summam voluptatem, et eam sempiternam? Si qua in iis corrigere voluit, deteriora fecit. Perge porro; Quippe: habes enim a rhetoribus; Quis est, qui non oderit libidinosam, protervam adolescentiam? Expectoque quid ad
id, quod quaerebam, respondeas.
</p>
<div class="image">
<img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&h=150">
<p>Image description text</p>
</div>
</div>
</div>
</div>
</div>
调整列的新创建的伪元素的填充,底部满足您的需求。理想情况下,您需要限制摘录长度。
- 1. 为什么我不能在引导列中对齐内容?
- 2. 对齐引导容器内的div列
- 3. 如何将内容与容器中间对齐引导程序
- 4. 均匀地对齐对象
- 5. 引导程序3导航栏切换折叠内容没有均匀排队
- 6. 如何均匀对齐两个div
- 7. 如何在css中对齐列内容
- 8. 使用不均匀的偏移来对引导中的内容进行居中
- 9. 使引导程序均匀分布并正确对齐div
- 10. 如何在工具条中均匀对齐按钮?
- 11. 将边栏与我的主内容引导对齐
- 12. 如何使用引导将内容向左或向右对齐?
- 13. 如何垂直对齐引导3中的内容与未知高度
- 14. 引导列 - 将内容对齐到左侧
- 15. 在折叠引导行上垂直对齐内容
- 16. 如何对齐引导列中的div?
- 17. 如何将引导程序3的导航栏对齐
- 18. 如何垂直对齐引导程序3列中的div
- 19. 如何在引导过程中将列表项向右对齐?
- 20. 如何在LinearLayout中以垂直方式均匀放置内容?
- 21. 对齐内容(纵连横)列表中的组引导
- 22. 引导程序将div中的内容对齐
- 23. 引导:1列出3不对齐
- 24. 引导3 - 两列 - div垂直对齐
- 25. 页脚列对齐问题引导3
- 26. 如何在HTML标头中均匀分布列表项内容并居中?
- 27. 引导对齐制表内容相应
- 28. 引导网格对齐内容
- 29. 在引导3对齐div右
- 30. 引导3表单对齐
请编辑您的问题,以包括您已经尝试过的代码,以及如何解释它的工作原理。此外,您可能会发现这有助于:[我如何问一个好问题?](http://stackoverflow.com/help/how-to-ask)。 – MJH