如何解决交替引导网格列和移动视图 带有卡片列的布局关于移动视图的问题
我有这样的设计:
台式机或大屏幕。
注意*红色或绿色框的高度不同。
手机或更低屏幕。
如何在bootstrap 4网格或自定义CSS网格上创建此布局类型,哪个更好?
谢谢,祝你有美好的一天。
解决方法
首先,如果您想构建类似砌体的圆柱,常规的Bootstrap网格系统将无法满足您的需求。相反,您将不得不使用card columns或JavaScript石工插件。
带有卡片列的布局
<div class="container">
<div id="example" class="card-columns">
<div id="card1" class="card border-success">
<div class="card-body">
<p class="card-text">Card #1 - height: 20rem;</p>
</div>
</div>
<div id="card2" class="card border-success">
<div class="card-body">
<p class="card-text">Card #2 - height: 12rem;</p>
</div>
</div>
<div id="card3" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #3 - height: 18rem;</p>
</div>
</div>
<div id="card4" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #4 - height: 14rem;</p>
</div>
</div>
</div>
</div>
只需一点样式即可为移动视图设置1列,为其他视图设置2列:
#example.card-columns {
column-count: 1;
}
@media(min-width: 576px) {
#example.card-columns {
column-count: 2;
}
}
您可以获得一些接近您想要实现的目标:
演示: https://jsfiddle.net/davidliang2008/n3fhyp8c/60/
关于移动视图的问题
现在,移动视图出现问题。由于CSS列的顺序是从上到下,从左到右,并且无法更改,因此在移动视图上获取所需内容的唯一方法是复制内容并根据断点隐藏/显示它们...
同样,您的第二个屏幕截图缺少一个红色框,所以我不知道您要在中间放置哪个。在这里,我假设您要将两个红色框都放在这里:
<div id="card1" />
<div id="card2" class="card border-success d-none d-sm-block">
...
</div>
<div id="card3" />
<div id="card4" />
<div id="card2" class="card border-success d-block d-sm-none">
...
</div>
然后,您可以在移动视图上获得想要实现的目标: