2 列之间的 Zurb 基础边距

Question

我试图在 2 列之间放置 10 像素的 padding/margin。但是当我这样做时，第二列就会中断。

html代码

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns">Content 1</div>
   <div class="large-6 medium-6 small-12 columns">Content 2</div>
</div>

如果我删除折叠，则列将向其所有方向添加填充。如何使行全宽但两列之间只有 10px 的填充或边距。

非常感谢任何帮助。提前致谢。

Answer 1

我们不能给列添加边距，否则行会溢出，因为列已经直接相互接触了。

您可以尝试这样的操作：

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns space">Content 1</div>
   <div class="large-6 medium-6 small-12 columns space">Content 2</div>
</div>

然后 CSS:

.space{
  padding: 10px; 
}

或者您可以像这样对列使用内部容器：

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns">
     <div class="panel">Content 1</div>
    </div>
   <div class="large-6 medium-6 small-12 columns">Content 2</div>
</div>

然后设置面板样式 class

Answer 2

这可以通过嵌套网格在不使用自定义 css 的情况下完成。可以使用折叠或未折叠的列来完成。

<div class="section-container">
<div class="row uncollapse section-wrapper">
 <div class="columns small-6 section-column-wrapper">
   <div class="row collapse">
    <div class="columns small-12">
        Left Column Text
    </div>
   </div>
  </div>
<div class="columns small-6">
  <div class="row collapse section-column-wrapper">
      <div class="columns small-12">
           Right Column Text
      </div>
     </div>
   </div>
  </div>

https://codepen.io/michaelwebster/pen/KXerOx

2 列之间的 Zurb 基础边距

Zurb foundation margin between 2 columns

html

css

zurb-foundation