0

私はFoundationを学び始めたばかりです（以前の厄介なcssの経験から）。行ごとに 4 つの col 画像のフルスクリーン ブロック グリッドを実行しようとしています。行を全幅にするためにこれがあります：

.row
  max-width: 100%

コードは次のとおりです。

<nav class='top-bar'>
  <ul class='title-area'>
    <li class='name'>
      <h1>
        <a href='#'>
          My Website
        </a>
      </h1>
    </li>
    <li class='toggle-topbar menu-icon'>
      <a href='#'>
        <span>menu</span>
      </a>
    </li>
  </ul>
  <section class='top-bar-section'></section>
</nav>
<div class='row'>
  <ul class='small-block-grid-2 large-block-grid-4'>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
  </ul>
</div>

迷惑な水平スクロールバーが表示されます。以下のスクリーンショットを参照してください

ここに画像の説明を入力

私はそれが以下の余白であることを知っています：

@media only screen
[class*="block-grid-"]
  margin: 0 -0.625em;

しかし、私はそれをオーバーライドすると思いますか？気分が悪い（ハックのように見える）。Foundation を適切に使用してブロック グリッドをフルスクリーンで表示するにはどうすればよいですか? これは単純なレイアウト要件です。

4

3 に答える 3

3

Foundation グリッドを説明しているドキュメントを見ると、彼らはすでにbox-sizing: border-boxスターハックを使用しています

.row含まれてblock-gridいるものには最大幅が 100% に設定されているため、画面幅からはみ出しています。通常、グリッド内の要素は、定義された列サイズでネストされ.rows、定義されたmax-widths列サイズに含まれます。

深く恐れてマージンを調整するだけで、ハッキーなことをすることができます。

@media only screen [class*="block-grid-"] margin: 0 2em;

.block-gridまたは、コンテナを使用してコンテナを含めることもできます<div class="large-12 columns">。

私が言いたいのは、他の半ダースのうちの6つです。グリッド レイアウトを台無しにすることを恐れている場合は、 body タグで条件付きクラスを使用して、カスタマイズblock-gridが必要なページのみに影響するようにすることができます。

于 2013-06-27T08:19:24.297 に答える
0

ポール・アイリッシュによるこのデモを見てください

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

これは役立つかもしれませんが、フィドルを提供できますか?

于 2013-06-27T07:22:09.337 に答える