html - 列不在较小的屏幕上放样

Question

我在 bootstrap 中使用了一个简单的布局，但无法使页面完全响应。当我减小浏览器宽度时，列不会堆叠。

我已经尝试了下面的 SO 建议，但都没有帮助:

• 在头上包含指向 bootstrap.min.css 的链接
• 在头上包含content="width=device-width

你可以查看我的问题的在线版本here .您可以看到列没有堆叠。

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
</div>

Answer 1

CSS 中的以下行覆盖了 bootstrap 的正常宽度。如果您不想为所有列设置固定大小，请删除或调整以下行。

.articles-area .row [class*="col-"]{
    float: none;
    display: table-cell;
    vertical-align: top;
    width: 33%;
}