交替 bootstrap 网格列和移动视图

Question

我有这样的设计：

桌面或大屏幕。

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

移动设备或更低的屏幕。

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

谢谢，祝你有愉快的一天。

Answer 1

首先，如果您想构建 masonry-like 列，常规的 Bootstrap 网格系统不会满足您的需求。相反，您将不得不使用 card columns 或 JavaScript masonry 插件。

带有卡片列的布局

<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 列的顺序是从上到下，从左到右，并且无法更改，因此在移动视图上获得所需内容的唯一方法是复制内容和 hide/show 他们基于断点...

同样，你的第二张截图少了一个红框，所以我不知道你想把哪个放在中间。在这里，我假设您想将两个红色框放在那里：

<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/