css - Bootstrap 网格 - 为什么我的列会折叠？

Question

我对 Bootstrap 网格系统有点困惑。我有一行包含两列，每列宽度为 3。

<div class="container">
    <div class="row">

        <!-- My row of columns -->
        <div class="row">
            <div class="col-md-12">

                <div class="col-md-3">
                    Column 1
                </div>

                <div class="col-md-3">
                    Column 2
                </div>

            </div>
        </div> <!-- End my row of columns -->

    </div>
</div>

目前，当我缩小页面的宽度时，第 2 列很早就低于第 1 列。但是，我宁愿这些列保持彼此相邻对齐，同时右侧仍然有一堆空白空间(即剩余的 6 个未使用的列)。

我如何实现它？

Answer 1

您需要为较小的断点添加类。一旦低于某个宽度 (992px) col-md-3不适用。

我建议如下:

<div class="col-xs-12 col-sm-6 col-md-3">
    Column 1
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
     Column 2
</div>

在此示例中，您要告诉 bootstrap 将列设置为 100% 宽度至 767px，50% 宽度至 991px，以及 25% 宽度至 992px 及以上。

您还需要在 <div class="col-md-12"> 中添加另一行否则您的网格将有额外的间距并且无法正确对齐。