是否可以使用引导程序错开列？答案

【问题标题】：Is it possible to stagger columns using bootstrap?是否可以使用引导程序错开列？
【发布时间】：2017-01-18 13:34:10
【问题描述】：

我使用 Bootstrap 将以下内容编码为 col-sm-6 框，内容长度不同，但是在包装框时，它们彼此对齐，而不是相对于其上方的底部对齐。有没有办法解决这个问题？

它应该是怎样的：

它是怎样的：

【问题讨论】：

我觉得this question 可能对你有帮助？

标签： html css

【解决方案1】：

如果你不想使用 flexbox，你可以使用 CSS 列：

.container    { column-count: 2; }
p             { border: 1px solid gray; background-color: lightgray; }
p:first-child { margin-top: 0; }

<div class="container">
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf<br><br>asdf<br>asdf</p>
</div>

在您的特定情况下，列实际上可能比 flexbox 更好，因为列会自动平衡。

【讨论】：

【解决方案2】：

如果您定义 2 列（左侧一列，右侧一列），您可以“伪造”该布局，然后将您的文章放在这些列中。

但更好的方法是使用像 masonry 这样的插件。 Masonry 非常适合这样的布局。

p {
  background: #eee;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-lg-6">
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
    </div>
      <div class="col-lg-6">
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
        <p>asdf</p>
        <p>asdf</p>
        <p>asdf<br><br>asdf<br>asdf</p>
    </div>
</div> 
</div>

【讨论】：

您的方法需要提前确定哪些项目应该放在哪些列中。

【解决方案3】：

使用

<div class="clearfix"></div>

在第 2 和第 4 格之后。如果你有更多的 div，那么在第 6 个 div 之后使用这个类。

【讨论】：