引导网格 - 为什么我的列崩溃了？答案

【问题标题】：Bootstrap grid - why are my columns collapsing?引导网格 - 为什么我的列崩溃了？
【发布时间】：2015-03-01 11:14:21
【问题描述】：

我对 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 个未使用的列）。

如何实现？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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"> 内添加另一行，否则您的网格将有多余的排水沟并且无法正确对齐。

【讨论】：

【解决方案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>

【讨论】：