基础：无内容列

Question

我有时会使用列作为间隔符，因此当没有内容时，我不希望列折叠，这是默认行为。是否有内置的方法来防止空列崩溃？

我知道我可以添加一些看不见的div或者其他东西，但是我想知道是否有一种标准的方法来实现这一点，而不是诉诸这样的黑客。

Answer 1

You can use offsets to create gaps:

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

Answer 2

我为此创造了一种hacky风格。像这样：

.row.no-collapse .columns {
  min-height: 1px;
}

<div class="row no-collapse">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>