列之间的 Zurb 基础边距 [英] Zurb Foundation Margin between Columns

问题描述

我有一个非常简单的 Foundation CSS 代码

<div class="large-offset-1 large-6 columns">内容放在这里</div><div class="large-4 end columns">Side 在这里</div>

我希望列之间有边距.目前，只有填充.因此，如果我将 background-color 添加到这些列中，那么它们会相互粘连.

Foundation 没有为此提供解决方案吗?

解决方案

你可以试试这个:

<div class="large-offset-1 large-6 columns padded-column"><div class="column-content">内容放在这里.</div>
<div class="large-4 end columns padded-column"><div class="column-content">Side 在这里</div>

然后，对于样式:

.padded-column {填充:10px；}.列内容{背景:红色；}

I have a very simple code with Foundation CSS

<div class="row">
    <div class="large-offset-1 large-6 columns">Content goes here</div>
    <div class="large-4 end columns">Side goes here</div>
</div>

I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.

Doesn't Foundation provide a solution for this?

解决方案

You could try this:

<div class="row">
  <div class="large-offset-1 large-6 columns padded-column">
    <div class="column-content">Content goes here.</div>
  </div>
  <div class="large-4 end columns padded-column">
    <div class="column-content">Side goes here</div>
  </div>
</div>

Then, for styles:

.padded-column {
  padding: 10px;
}
.column-content {
  background: red;
}

这篇关于列之间的 Zurb 基础边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！