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 列。但是，我宁愿这些列保持彼此相邻对齐，而右侧仍然有一堆空的 space（即剩余的 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%，最大宽度为 767 像素，宽度为 50%，宽度最大为 991 像素，宽度为 25%，宽度为 992 像素及以上。

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

Answer 2

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="row">
       <div class="col-sm-6">
         Column 1
       </div>
       <div class="col-md-6">
         Column 2
       </div>
       </div> <!-- end of row -->
     </div>
    </div> <!-- End my row of columns -->
</div>

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

Bootstrap grid - why are my columns collapsing?

css

twitter-bootstrap

twitter-bootstrap-3