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

Question

我一直在使用 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;
}

Answer 1

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

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

Answer 2

我对 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/

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

How to add padding between columns in Foundation Float grid?

html

css

responsive-design

zurb-foundation

css-grid