是否可以使用引导程序交错列? [英] Is it possible to stagger columns using bootstrap?

问题描述

我使用Bootstrap将以下内容编码为col-sm-6框，其内容长度不一，但是在包装时，这些框彼此对齐，而不是相对于其上方的底部对齐.有什么办法可以解决这个问题?

I've coded the following to be col-sm-6 boxes using Bootstrap with content that vary in length, however upon wrapping the boxes align with each other instead of relative to the bottom of the one above it. Is there any way to fix this issue?

应该如何:

如何:

推荐答案

如果您不想使用flexbox，可以使用CSS列:

If you don't want to use flexbox, you could use CSS columns:

.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更好，因为列会自动平衡.

In your particular case, columns might actually be better than flexbox, since the columns will automatically balance.

这篇关于是否可以使用引导程序交错列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！