2013-07-09 16 views
9

デフォルトでは、Zurb Foundation 4および5の行は、非常に大きなモニタであっても、最大幅1000pxで実行され、コンテンツの両側に余白が作成されます。デザインの応答性に影響を与えずにフルスクリーンで動作させるにはどうすればよいですか?あなたはサス/コンパス、zurb-foundation宝石、またはカスタマイズされた財団の配布を使用している場合、あなたは$row-width変数を設定することができZurb Foundation 4/5の全画面で行を作成するにはどうすればよいですか?

+0

受け入れ答えは私が始まったが、私はこれを使用しなければなりません:body、html、.row {margin:0px;幅:100%!重要;最小幅:100%!重要; } –

答えて

20

は、CSSファイルに次のコードを追加します。これはそれが使用されている他の場所に流れます。また、列数、溝幅などを調整することもできます。

グリッドのドキュメントの下部には、より多くを説明していますhttp://foundation.zurb.com/docs/components/grid.html

+0

私はこれがページ全体を100%にするので、これは好きではありません。フッターやヘッダーを100%作成するだけの場合は、下の私の例を参照してください。 – Tom

+0

まあ、はい、明らかです。それは元の質問ではありません。あなたのコメントは、あなたがコメントに載せた質問に対する完全に有効な答えです。 – BFWebAdmin

+0

@BFDatabaseAdmin!importantを使用すると、スタイルシートを破壊する良い方法です。すべての.row.narrowは、minover:50%を設定できません。stackoverflowコメントスレッドの誰かが、デフォルトのmin-widthをオーバーライドするために、ベースの.rowスタイルに!重要なタグがあるはずです行の上に... – Lotus

9

私はこれを行うための最善の方法は次のようだと思います。

this-

<div class="row full-width"> </div> 

これはあなたがイベントでタクトでグリッドシステムを維持することができますか、あなたのhtmlに続いて、あなたのCSSや

.row.full-width { 
    width: 100%; 
    max-width: 100%; 
} 

css-カスタムにこれを追加します。ヘッダーまたはフッターにはフルスクリーンを使用したいだけです。

-5
<div class="row"> 
    <div class="large-6 columns"></div> 
    <div class="large-6 columns"></div> 
</div> 

これは1000px

<div class="large-6 columns"></div> 
<div class="large-6 columns"></div> 

の幅を与えるだろうが、あなたは行クラスなし列クラスを使用する場合は、フルスクリーンを取得します...

+0

行を追加しないと、基本的なグリッドベースの構造のZurbが失われます。 – BFWebAdmin

関連する問題