Zurb Foundation：防止空柱折叠到零宽度

Question

使用Foundation，我有时会在一行中有一个空列，并且该列会完全折叠，从而导致列数据和列标题之间不匹配。有没有办法可以防止这种崩溃，甚至空柱都可以达到全宽？ （除了在其他空列中插入不间断空格或其他文本之外，还有其他方法吗？）

<div class="row">
  <div class="small-1 columns">Bruce</div>
  <div class="small-1 columns"></div> <!-- this gets collapsed to 0 width! -->
  <div class="small-1 columns">Dickinson</div>
</div>

Answer 1

应用以下css：

.column, .columns{
  min-height: 1px;
}

Answer 2

您可以向包含元素添加一些伪内容以触发渲染。

标记：

<div class="row">
  <div class="column">
    <p class="middlename"></p>
  </div>
</div>

CSS：

.middlename:before {
  content: "\00a0";
  font-size: 0;
}

Answer 3

您可以使用＆＃34;结束＆＃34;。

标记最后一列（您正在使用）

 <div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>