9

Zurb Foundation 4 でグリッド セル間に間隔を空ける簡単な方法はありますか? Foundation 要素の CSS を台無しにしたくありません。Grid docs$column-gutterに SCSS 変数があります。

$column-gutter: 1.875em !default;

ただし、1.875emではなく、列間にスペースがないように見えるため、それが何のためにあるのかわかりません。セル内のすべてのコンテンツの周りにパディングがあることを確認する必要がありますか?

4

2 に答える 2

6

Foundation.cssの後にロードされる別のスタイルシートを使用してみてください。コンテンツは次のようになります。

@media only screen {
  .row .columns, .row .column {
    padding-left: 10px; /* change the values to anything that you want */
    padding-right: 10px;
  }
}

印刷の場合、余分なパディングを付けて表示したくない場合があるため、@mediaのみの画面に配置しました。

ここでのこの例

印刷中にこの余分なパディングを使用する場合は、次を使用する必要があります。

.row .columns, .row .column {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

デフォルトのfoundation.cssには値を上書きする@mediaのみの画面があるため、重要な部分を使用する必要があります。

編集

追加のパディングを適用する列には、別のクラスを使用するだけです。例：

.extra-padding {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

ここでのこの例

于 2013-03-07T18:12:54.950 に答える