Bootstrap 列在 window 调整大小后无法使用砌体

Question

我建立了一个评论页面并使用 masonry 显示评论。

每一方的评论是 <div col-sm-12 col-md-6> 列。但是，当我尝试将 window 的宽度调整到 767px 以下时，bootstrap 列仍然占据屏幕尺寸的一半（保持为 col-md-6）。奇怪的是，当我进入 Chrome 浏览器的控制台并切换 device toolbar 时，这些列将正常工作。为什么它在我通过 chrome 的设备工具栏查看时有效，但在我手动调整 window 大小时却无效？

这是砌体的js

$(document).ready(function () {
    var masonryOptions = {
        columnWidth: '.card',
        itemSelector: '.grid-item',
        percentPosition: true,
        horizontalOrder: true
    };

    // initializes masonry
    var $grid = $('.grid').masonry( masonryOptions );
    var isActive = true;
});

Answer 1

问题是，您在已编译的 template_4.css 文件末尾附近有一个 css 样式，它设置了 .card 项目在所有断点处达到 50%。有问题的样式是 body.template4reviews .reviews-section .card，它在您的 css 中使用，如下所示。

body.template4reviews .reviews-section .card {
    width: 50%;
}

/* Note the `max-device-width` */
@media only screen and (max-device-width: 768px) {
    body.template4reviews .reviews-section .card {
        width: 90%;
    }
}

由于您在媒体查询中使用 max-device-width，这意味着 .card 项的宽度每次在屏幕（而不是视口）宽于768 像素。另一方面，.cards 在移动设备上的宽度为 90%。因此，您会在 Chrome 设备工具栏中看到正确的布局。

注：

max-device-width 是设备渲染表面的最大宽度。
max-width CSS 描述符指定文档视口的最大宽度.

所以我想您可能想改用 max-width 描述符，如下所示：

@media only screen and (max-width: 768px) {
    body.template4reviews .reviews-section .card {
        width: 90%;
    }
}

Bootstrap 列在 window 调整大小后无法使用砌体

Bootstrap columns not working with masonry after window resize

masonry

bootstrap-4