我正在尝试在我的网站上使用 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/
最佳答案
尝试将此代码添加到 <head>你的 HTML 页面:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我注意到它可以在您的 CodePen 上运行(至少在 Chrome 仿真中)，但是在您的网站上，当我添加视口(viewport)时它开始运行。你可以read more about that here如果你感兴趣。希望对您有所帮助。
关于javascript - Bootstrap 4 砌体效果响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54012294/