如何处理引导程序中的网格，网格内的网格[重复]答案

【问题标题】：How to handle grids in bootstrap, grids inside grids [duplicate]如何处理引导程序中的网格，网格内的网格[重复]
【发布时间】：2020-02-17 20:00:55
【问题描述】：

我的页脚中有三列 (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>

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

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

将 col-md-6 更改为 col-6，因为这是 Bootstrap 的 4 个最小的屏幕案例。 col-md-6 将在 md (>=768px) 大小的屏幕和更大的屏幕上保持两列彼此相邻，但将它们堆叠在该断点下方。你需要wrap that inner set of divs在一个带有类行的div中。

<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>

【讨论】：