Html 2柱之间的ZURB地基边缘

我试图在两列之间放置一个10像素的填充/边距。但是当我这样做的时候，第二列就中断了

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>

内容1
内容2

若我移除了折叠，那个么列会向其所有方向添加填充。如何使行全宽，但两列之间只有10px的填充或边距

---

非常感谢您的帮助。提前感谢。

我们无法为列添加边距，否则行将溢出，因为列之间已经直接接触

您可以尝试以下方法：

<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>

<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>

或者，您也可以对以下列使用内部容器：

<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>

<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>

内容1
内容2

---

然后设置面板类的样式，我们不能向列添加边距，否则行将溢出，因为列已经直接相互接触

您可以尝试以下方法：

<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>

<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>

或者，您也可以对以下列使用内部容器：

<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>

<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>

内容1
内容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>

左列文本
右栏文本

---

无需通过嵌套网格使用自定义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>

左列文本
右栏文本

---

您想要的是：？您想要的是：？很棒的解决方案。非常感谢你的帮助。实际上，两个div都包含一个图像作为背景，所以我不能使用面板。但我必须使用lspace和rspace，左右各5像素。再次感谢您的指导。非常棒的解决方案。非常感谢你的帮助。实际上，两个div都包含一个图像作为背景，所以我不能使用面板。但我必须使用lspace和rspace，左右各5像素。再次感谢您的指导。