Question

我在引导程序中使用了简单的布局，但是无法使页面完全响应。减小浏览器宽度时，列不会堆叠。

我已经尝试了以下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中的以下行将覆盖引导程序的常规宽度。如果您不希望所有列的大小都固定，请删除或调整以下几行。

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

列不会在较小的屏幕上放样

1 个答案: