使用无嵌套网格的引导的多行网格
使用无嵌套网格的引导的多行网格
提问于 2015-10-27 17:51:09
我需要为桌面制作一个多行列，而对于移动来说，网格的布局将是不同的。请看下面的图片。
桌面布局
移动布局。
在移动元素B将是第一。但对于桌面，A将在右边，跨越两行。我尝试通过使用column push-#/column pl-#重新安排桌面布局，但我不能使B和C位于同一列/不同的行中，并使A跨越这两行。我知道我可以实现桌面布局使用嵌套网格，但我不能重新安排元素使用推拉。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-27 21:15:25
引导4--它支持柔性盒-会很好，但是这里有一种方法，您可以不嵌套，但您需要创建一些自定义类。这是演示。
<div class="row">
<div class="pull-sm-right col-sm-6">
<p>B</p>
</div>
<div class="pull-sm-left col-sm-6">
<p>A</p>
</div>
<div class="pull-sm-right col-sm-6">
<p>C</p>
</div>
</div>您需要的自定义类是这样的.pull-*-<location>类：
@media (min-width: 768px) {
.pull-sm-right {
float: right !important;
}
.pull-sm-left {
float: left !important;
}
}您需要手动配置div的高度，但是Bootstrap的基于浮点的网格系统从来没有真正匹配过列的高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33375126
复制相关文章
相似问题
腾讯云开发者
