Bootstrap 4 砌体效果响应性答案

【问题标题】：Bootstrap 4 masonry effect responsivenessBootstrap 4 砌体效果响应性
【发布时间】：2019-05-29 10:51:47
【问题描述】：

我正在尝试在我的网站上使用 bootstrap 4 砌体效果。但是，这些卡没有响应。这是一个没有特殊效果的基本页面。

请注意，该页面在调整浏览器窗口大小时可以完美运行，但不能在移动屏幕上运行。我希望卡片在调整浏览器窗口大小时出现在移动屏幕上相互堆叠。这是基本的 HTML 代码。

@media screen and (max-width: 992px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media screen and (max-width: 600px) {
    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

<div class="container">
    <div class="card-columns">

        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

我在 CSS 中使用了媒体查询。尽管如此，页面只是在小屏幕上显示为缩小。

这是它在移动屏幕上的外观。

如果您想在手机上查看该网站，请点击以下链接： https://cocky-hermann-3927c7.netlify.com/

【问题讨论】：

标签： javascript html css responsive-design bootstrap-4

【解决方案1】：

尝试将此代码添加到您的 HTML 页面的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我注意到它可以在您的 CodePen 上运行（至少在 Chrome 仿真中），但在您的网站上，当我添加视口时它开始运行。有兴趣的可以read more about that here。希望对您有所帮助。

【讨论】：

就是这样！有效。由于我的声誉，我不能给你投票，但非常感谢。这正是我想要的。
@Himanshu 很高兴能帮上忙，很高兴你能够让它工作

【解决方案2】：

除了crazymatt的回答，DVGA和WXGA手机屏幕分辨率分别是640px和768px宽。也就是说，600px 的宽度并不涵盖高端手机屏幕宽度。 799px 是移动设备更好的断点。低分辨率平板电脑和笔记本电脑通常从 800 像素开始；因此，这意味着您将在几乎所有非手机设备上获得 3 列布局，但在几乎所有手机上获得 1 列布局。

【讨论】：