Zurb基础边距在2列之间

Question

我试图在2列之间放置10 px的填充/边距.但是当我这样做时,第二列就会破裂.

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填充或2列之间的边距.

任何帮助都非常感谢.提前致谢.

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>

然后设置面板类的样式