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，以及992px及以上的宽度为25％。

此外，您需要在<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网格 - 为什么我的列会崩溃？

2 个答案: