个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试在我的网站上使用 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/
26
4
0
我是一名优秀的程序员,十分优秀！