我试图在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列之间的边距。
非常感谢任何帮助。提前谢谢。
答案 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>