Question

我的页脚中有三列（col-md-4），第一列又有两列（col-md-6）。我希望第一列中的这两列在移动视图中在一起。我应该如何分区？？

我尝试的是类似的东西

<div class="row">
<div class="col-md-4">
    <div class="col-md-6">

    </div>
    <div class="col-md-6">

    </div>
</div>
<div class="col-md-4">

</div>
<div class="col-md-4">

</div>

但是我在移动设备中将两列放在另一列下面，我希望它们位于同一网格中。

Answer 1

将col-md-6更改为col-6，因为这是Bootstrap的4个最小的屏幕外壳。 col-md-6将在md（> = 768px）尺寸和更大尺寸的屏幕上保持两列相邻，但将其堆叠在该断点以下。并且您将需要在带有类行的div中wrap that inner set of divs。

<div class="row">
  <div class="col-md-4">
    <div class="row">
      <div class="col-6">
      </div>
      <div class="col-6">
      </div>
    </div>
  </div>
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
</div>

如何处理引导程序中的网格，网格中的网格

1 个答案: