css - 交替引导网格列和移动视图

Question

我有这样的设计：

桌面或大屏幕。

注意* 红色或绿色方框的高度不同。

移动或更低的屏幕。

如何在 bootstrap 4 网格或自定义 CSS 网格上创建这种布局类型，哪个更好？

谢谢，祝你有美好的一天。

标签： csstwitter-bootstrapbootstrap-4grid

Answer 1

首先，如果您想构建类似砖石的柱子，常规的 Bootstrap 网格系统将无法满足您的需求。相反，您将不得不使用卡片列或 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>

然后你可以得到你想要在移动视图上实现的东西：

演示： https ://jsfiddle.net/davidliang2008/n3fhyp8c/63/