Bootstrap:如何堆叠不同高度的div? [英] Bootstrap: how to stack divs of different heights?
问题描述
这个问题有点类似于
应用于您的Bootstrap list-group
看起来像这样..
但是,您需要删除Bootstrap col - *
从你的标记的类,因为他们使用浮动一个乱糟糟的砌体布局。使用 * - column-width
属性可更改面板的宽度。因此,可以使用纯CSS,但不支持跨浏览器兼容,因此您仍然可能需要使用 Masonry插件作为后备。
如果您只是想确保列包裹每个 x 列,请使用Bootstrap 响应重置,或具有如下媒体查询的clearfix解决方案: http://www.codeply.com/go/jXuoGHHker
UPDATE Bootstrap 4将包括 CSS列布局砖石选项。
This question is a bit similar to this one, but I want to know if there is a pure CSS solution that is compatible with Bootstrap.
Basically, I have the following layout:
This is the HTML of that page:
<div class="menu row">
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
</div>
<div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
<a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
</div>
</div>
The problem is, as you can see, that the row system of Bootstrap is a bit inconvenient here. I want these categories to stack in the most optimal way. So my question is: how can I do that with CSS? The masonry plugin seems excellent but I would like to keep it for plan B.
Thanks!
Take a look at these examples..
Masonry-style Layout ONLY with CSS
Applied to your Bootstrap list-group
it would look something like this..
However, you need to remove the Bootstrap col-*
classes from your markup since they use floats a mess up the masonry layout. Use the *-column-width
property to change the width of the panels. So, it's possible with pure CSS, but not cross-browser compatible so you still may want to use the Masonry plugin as a fallback.
If you're simply looking to ensure the columns wrap every x columns, use Bootstrap responsive resets, or a clearfix solution with media queries like this: http://www.codeply.com/go/jXuoGHHker
UPDATE Bootstrap 4 will include a CSS column layout masonry option.
这篇关于Bootstrap:如何堆叠不同高度的div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!