Question

我使用Foundation框架，并且希望减少列之间的间隔。我应该更改foundation.css的哪一部分以减少那三列之间的间隙？

html代码：

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns">
                    </div>
                    <div class="medium-6 columns">
                    </div>
            </div>
    </div>

</div>

嗨，丹尼尔，谢谢，但是如果我想在特定栏中调整呢？示例：在1行中，我有2列，1列有2列，其他列有4列。我只想调整第二列中有4列的间隙

Answer 1

您必须像这样更改列的填充：

@media print, screen and (min-width: 40em) {
  .column, .columns {
      padding-right: 10px;
      padding-left: 10px;
  }
}

这将覆盖以下默认值：

    padding-right: .9375rem;
    padding-left: .9375rem;

请参见https://codepen.io/DanielRuf/pen/RvoYrr

是根据https://github.com/zurb/foundation-sites/blob/4abaf7ad3c508bf3fc73cb5dfd8928f756968c7d/scss/grid/_gutter.scss#L16中的装订线混合生成的

我创建了另一个示例，其中包含两个类pr10和pl10，用于在右边的列中添加填充。

您也可以在行级上执行相同的操作。

https://codepen.io/DanielRuf/pen/QYGPKO

@media print, screen and (min-width: 40em) {
  .pl10 {
      padding-left: 10px;
      background: green;
  }
  .pr10 {
      padding-right: 10px;
      background: green;
  }
}

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">1
                    </div>
                    <div class="medium-4 columns">2
                    </div>
                    <div class="medium-4 columns">3
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns pl10 pr10">4
                    </div>
                    <div class="medium-6 columns pl10 pr10">5
                    </div>
            </div>
    </div>
</div>

（pr10和pl10是简写版本，通常在带有Tachyons和tailwindcss实用程序类的CSS框架中使用。）

或者您可以使用以下CSS定位右列：

@media print, screen and (min-width: 40em) {
  .row > .medium-10.columns + .medium-2.columns > .row > .medium-6.columns {
      padding-left: 10px;
      padding-right: 10px;
      background: green;
  }
}

请参见https://codepen.io/DanielRuf/pen/gqgbNG

如何调整基础框架中列之间的间距？

1 个答案: