奇怪的Bootstrap容器断点行为

Question

如果我将浏览器宽度设置为1024px，则会应用以下引导容器规则：

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

如果我将浏览器宽度扩展到1092px，则会应用以下引导容器规则：

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

没有其他CSS规则应用于容器，只是标准的引导规则：

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

任何人都可以向我解释为什么浏览器宽度为1024px并未应用min-width: 992px规则吗？

Answer 1

我想你忘了打开近距离{ }

@media (min-width: 768px) {
            .container {
                width: 750px;
                background: yellow;
            }
        }

        @media (min-width: 992px) {
            .container {
                width: 970px;
                background: red;
            }
        }