如何使用bootstrap设计div标签
如何使用bootstrap设计div标签
提问于 2016-04-14 07:23:02
我试着用bootstrap制作多个盒子，如下所示
所有的图像都是相同的高度，但宽度不同，所以我尝试使用网格系统，但它不起作用。“不起作用”是什么意思？如果我把image1 -md-4放在image2上，然后把col md-2放在后面的txt上，把col md-3放在txt上，所有网格系统的宽度和高度都会自动调整，所以所有图像的高度都是不同的。
你能帮我解决这个问题吗？
回答 2
Stack Overflow用户
发布于 2016-04-15 05:45:51
我想到了Masonry，但显然还有一个横向的：masonryHorizontal。
Stack Overflow用户
发布于 2016-04-14 08:32:43
您是否正在使用包含元素来容纳网格系统？例如，Bootstrap 3使用：
<div class="container">
...
</div> 此外，随着视口大小的增加，引导网格系统可扩展到12列。如果您希望在顶行有三个偶数列，请尝试如下所示：
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div> 看看这个js fiddle https://jsfiddle.net/andrewjst/3gtst4c2/ -它的列集与您在图片中显示的列集相同。
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div>
<div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div>
<div class="col-xs-6 col-xs-4" style="border-style: solid;">.col-xs-6 col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
<div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
<div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
<div class="col-xs-6 col-xs-3" style="border-style: solid;">.col-xs-6 col-xs-4</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36611234
复制相关文章
相似问题
腾讯云开发者
