Zurb基础边距在2列之间

时间:2015-05-19 06:31:34

标签: html css zurb-foundation

我试图在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列之间的边距。

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

2 个答案:

答案 0 :(得分:5)

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

您可以尝试这样的事情:

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

然后设置面板类的样式

答案 1 :(得分:0)

这可以通过嵌套网格而不使用自定义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