Question

我在Zurb Foundation 5中遇到了这个奇怪的问题。每当我在行内嵌入行时，它会产生负边距，将其抛出网格。这是我的代码的示例标记：

<div class="row main-content">
    <div class="row">
        <div class="breadcrumbs columns small-12">My account / Companies list /</div>
        <div class="columns small-6 heading-container">
            <h1>Create new company</h1>
        </div>
    </div>
</div>

这就是代码，基金会产生：

.row .row {
    width: auto;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
}

如何防止此行为？我的标记是否有问题，或者我应该覆盖基础scss（但我不想覆盖默认样式）。

Answer 1

您需要在行内嵌套，即

<div class="row">
  <div class="breadcrumbs small-12 columns">
     My account / Companies list /
    <div class="row">
    <div class="Heading-container small-6 columns">
      <h1>Create new company</h1>
    </div>
   </div> <!--/nested row-->
 </div>
</div><!--/row-->

Answer 2

问题在于＆＃34;列＆＃34; vs＆＃34;专栏＆＃34;

如果您添加列（使用＆＃34; s＆＃34;）类，它将删除填充，因为它是第一个孩子。将其更改为单数＆＃34;列＆＃34;并且将添加填充。

基础5格网格嵌套负边距

2 个答案: