Zurb基础边距在2列之间 [英] Zurb foundation margin between 2 columns

问题描述

我想在2列之间放一个10像素的填充/边距。

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

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

任何帮助是非常感激。提前感谢。

解决方案

我们无法向列添加边距，或者行会溢出，因为列直接相互接触已经。

您可以尝试这样的：

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

然后CSS：

  .space {
 padding：10px; 
} 
  

或者可以使用内部容器作为列：

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

，然后为面板类设置样式

I am trying to put a padding/margin of 10 px between 2 columns. But when I do then the 2nd column breaks.

html code

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

If I remove collapse then column adds padding to it's all direction. How can I make the row full width but only 10px padding or margin between 2 columns.

Any help is highly appreciated. Thanks in advance.

解决方案

We can't add margins to columns or the row would overflow, because the columns directly touch each other already.

You could try something like this:

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

and then CSS:

.space{
  padding: 10px; 
}

or you could use inner container for columns like this:

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

and then style the panel class

这篇关于Zurb基础边距在2列之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！