twitter-bootstrap - 在不同断点处将引导程序集合带到上一行？

Question

我已经在网格上浏览了 Bootstrap 的文档——我可能遗漏了一些东西，但我看不到这样做的方法。

我有一行包含三列（每列 col-lg-4） - 我想在 col-md 断点（col-md-6）处将其重新组织为两列，但我最终在第三列旁边有空白空间col- 元素（因为该行包含三个 col- 元素）。

我已经包含了一个信息图来说明我的意思。

有没有一种方法（原生于引导程序）可以将下一行的内容带到填充这个空白空间？

标签： twitter-bootstrapgrid

Answer 1

您的解释是正确的，但您的 html 结构似乎有问题。

我为您创建了一个工作小提琴，向您展示一种可能的解决方案。这是运行代码：

.row {
  margin-top: 20px;
}

.col-lg-4 {
  padding: 10px;
}

.inside-col {
  background: #aaa;
  color: #fff;
  text-align: center;
  padding: 100px 50px;
  min-height: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
  </div> 
</div>