如何在 Foundation Float 网格中的列之间添加填充？答案

【问题标题】：How to add padding between columns in Foundation Float grid?如何在 Foundation Float 网格中的列之间添加填充？
【发布时间】：2019-06-20 03:52:55
【问题描述】：

我一直在使用 Foundation 6 框架尝试在列之间创建少量填充，但是我似乎找不到解决方案，我哪里出错了？

Here's an image explaining what I've got and what I'm trying to achieve

   <div class="row">
        <div class="column large-4 small-12">
            <P>Text1</P>
        </div>

        <div class="column large-4 small-12">
            <p>Text2</p>
        </div>

        <div class="column large-4 small-12">
            <p>Text3</p>
        </div>
    </div>


.column, .columns {
    border:red 1px solid;
    background-color:@menu-color;
    padding:5px;
}

【问题讨论】：

标签： html css responsive-design zurb-foundation css-grid

【解决方案1】：

我对 Zurb Foundation 不太熟悉，但看到他们使用 Flexbox。我也修改了您提供的代码以使用 Flexbox，尽管它仅用于布局目的。我们只是针对中间行项目并为其提供一些左右边距。

.column,
.columns {
  border: red 1px solid;
  padding: 5px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
   flex: 1;
}

.column:nth-child(even) {
  margin-left: 10px;
  margin-right: 10px;
}

<div class="row">
  <div class="column large-4 small-12">
    <P>Text1</P>
  </div>

  <div class="column large-4 small-12">
    <p>Text2</p>
  </div>

  <div class="column large-4 small-12">
    <p>Text3</p>
  </div>
</div>

http://jsfiddle.net/ncL9wjbv/

【讨论】：

【解决方案2】：

尝试为 css 添加边距而不是填充。

.column, .columns {
    border:red 1px solid;
    background-color:@menu-color;
    margin:5px;
}

【讨论】：