Css 引导:如何堆叠不同高度的div?
这个问题有点类似于,但我想知道是否有一个与引导兼容的纯CSS解决方案 基本上,我有以下布局: 这是该页面的HTML:Css 引导:如何堆叠不同高度的div?,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,这个问题有点类似于,但我想知道是否有一个与引导兼容的纯CSS解决方案 基本上,我有以下布局: 这是该页面的HTML: <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">Catego
<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>
类别
类别
类别
类别
类别
问题是,正如您所看到的,引导的行系统在这里有点不方便。我希望这些类别以最佳方式堆叠。
所以我的问题是:我如何用CSS做到这一点?砖石插件似乎很好,但我想保留它的计划B
谢谢 看看这些例子 应用于您的引导
列表组
它看起来像这样
但是,您需要从标记中删除引导col-*
类,因为它们使用浮点数会使布局混乱。使用*-列宽
属性更改面板的宽度。因此,可以使用纯CSS,但不兼容跨浏览器,因此您可能仍然希望使用作为备用方案
如果您只是希望确保每x列包装一列,请使用引导或clearfix解决方案进行媒体查询,如下所示:
更新引导程序4将包括一个。更好地使用.visible sm、.visible md、.visible lg和clearfix类。这也有助于根据屏幕大小清除浮动
<!-- This will clear the float in Middle and Large Size screens only -->
<div class="clearfix visible-md visible-lg"></div>
<!-- This will clear the float in Small Size screens only -->
<div class="clearfix visible-sm"></div>
你可以试试这个
<div class="grid-container">
<div class="sub-grid">....</div>
<div class="sub-grid">....</div>
<div class="sub-grid">....</div>
</div>
.grid-container{
-moz-column-count:2;
-moz-column-gap:10px;
-webkit-column-count:2;
-webkit-column-gap:10px;
column-count: 2;
column-gap: 10px;
}
.sub-grid{display: inline-block;width: 100%;}
....
....
....
.网格容器{
-moz列数:2;
-moz柱间距:10px;
-webkit列数:2;
-webkit柱间隙:10px;
列数:2;
柱间距:10px;
}
.sub-grid{显示:内联块;宽度:100%;}
演示我的解决方案基于@ashish kumar的答案 我有一个盒子形状的项目,如下所示
<div class="row the-list">
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
</div>
请注意,在执行“重置新行”时,规则是.row.the-list.box wrap
,并且在开头有“.row”,因此该规则显示的:block前面规则的代码>
一个活生生的例子,请参阅的网站这太棒了!我只需要支持现代浏览器就可以了,所以我会选择专栏css解决方案。谢谢你写出来,这对我来说是新的。@IanSteffy你应该删除那个评论。这个链接已经被OBE使用了很长一段时间了-很好的解决方案!干净又有帮助!我很高兴它帮助了你。干杯这确实有助于每X包裹一行,但不能像“砖石”样式的布局那样消除间距。此外,它还有更多的标记:
<div class="row the-list">
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="box-wrap clearfix"></div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="box-wrap clearfix"></div>
<div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
<div class="box-wrap clearfix"></div>
</div>
$('<div class="box-wrap clearfix"></div>').insertAfter('.box');
/* hide all new lines by default */
.the-list .box-wrap {
display: none;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
/* reset new lines */
.row.the-list .box-wrap {
display: none;
}
/* new line every 2nd box */
.the-list .box-wrap:nth-child(4n) {
display: block;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* reset new lines */
.row.the-list .box-wrap {
display: none;
}
/* new line every 3rd box */
.the-list .box-wrap:nth-child(6n) {
display: block;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
/* reset new lines */
.row.the-list .box-wrap {
display: none;
}
/* new line every 4th box */
.the-list .box-wrap:nth-child(8n) {
display: block;
}
}