Question

我已经建立了一个评论页面并使用砌体显示评论。

每一方的评论都是<div col-sm-12 col-md-6>列。但是，当我尝试将窗口大小调整为低于767px宽度时，引导列仍然占用屏幕大小的一半（保留为col-md-6）。奇怪的是，当我进入Chrome浏览器控制台并切换device toolbar时，列将完美运行。当我通过chrome的设备工具栏查看它时它有什么原因，但是当我手动调整窗口大小时却没有原因吗？

这是砌体的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项的with设置为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，这意味着每次在屏幕（而非视口）宽于768px的设备上，.card项的宽度将为50％。另一方面，移动设备上.card的宽度将达到90％。因此，您会在Chrome设备工具栏中看到正确的布局。

注意：

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

所以我猜你可能想要使用max-width描述符，如下所示：

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

窗口调整大小后，引导列不与砌体一起使用

1 个答案: