web-dev-qa-db-ja.com

zurbの基礎は、完全な行幅を持つことが可能である

Foundation 3を使用してレスポンシブWebサイトを構築していますが、フッターとナビゲーションの背景幅を使用して幅全体を占めるようにしたいですか？行に名前を付けました

class="row navigation"
class="row footer"

これを修正する方法を探しましたが、選択肢がありません。私はそれがfoundation.cssファイルの小さな修正であると仮定していますが、私はそれが初めてなので、それは少し圧倒的です。

どんなpoiintersも大歓迎です。

csshtml5responsive-designzurb-foundationgrid-system
33
Chou One

昨日、同じ問題に遭遇しました。秘Theは、行/列が常にデフォルトのパディングを適用するため、全幅のスパニングブロックの場合、行/列構造からブロックを外すだけです。フッターとヘッダーを独自に保持し、それらの中で行/列を使用します。

<header>
    This will span the full width of the page
</header>
<div class="row">
    <div class="twelve columns">
        This text will flow within all typical padding and margins
    </div>
</div>
<footer>
    This will span the full width of the page
    <div class="row">
        <div class="twelve columns">
            This text will flow within all typical padding and margins
        </div>
    </div>
</footer>
67
nikolasleblanc

私がやっていることは、カスタムクラスを追加して、.rowでチェーン化し、max-width設定をオーバーライドできるようにすることです。

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

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

ここにも幅を入れてベースをカバーしますが、すでにFoundation.cssで宣言されているため、単に省略できます。

65
Stacey Schlenker

Zurb Foundation Frameworkを使用している場合は、rowクラスを削除し、幅100％のクラスcontainerで要素をラップするだけです。おそらく、あなたはおそらくものを中央に置きたい、クラスcenteredを次のように使用する：

<div class="container navigation">
    <div class="centered">
        Some navigation stuff
    </div>
</div>
12
cosmicdot

私はその答えに完全に同意しません。 ！importantを使用する必要はありません。

http://edcharbeneau.github.com/FoundationSinglePageRWD/ で私の記事とデモを参照してください

そこから必要なものを入手できるはずです。デモは2.2用ですが、機能はv3と非常に似ています。

8
Ed Charbeneau

次のように「セクション」を使用します。

<section>
  <div class="row">
   <div class="small-12 columns">
   </div>
  </div>
</section>

次に、セクションにIDを割り当て、それを背景に使用します。

4
Troy

Foundation 6は、この機能をrow expanded。コード例：

<div class="expanded row">
    ...
</div>

詳細はこちら： http://foundation.zurb.com/sites/docs/grid.html#fluid-row

3
elicohenator

これは、Foundation 5に関するものです。これまでに与えられた答えはどれも、端から端まで、全幅を提供しません。内部.columnsがパディングを追加するためです。

真のEdge-to-Edge、全幅コンテンツの場合、これをCSSに追加します。

.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }

.fullクラスを、幅全体を拡張する.rowに追加するだけです。

<div class="row full">
  <div class="medium-6 column">This column touches Left Edge.</div>
  <div class="medium-6 column">This column touches Right Edge.</div>
</div>
3
timofey.com

私はすでに多くの答えがあることを知っていますが、誰かがFoundation 5を使用していて、この質問につまずいた場合、このトピックに追加する新しいものがあると思います（私のような）。

FoundationはREMユニットを使用しているため、.rowクラスを使用し、余分なクラスを追加することにより、選択した行のみを全角で表示できます。たとえば、.fullクラス：

.row.full {
    max-width: 80rem;  /* about 90rem should give you almost full screen width */
}

Zurb Foundationのドキュメントページでもこのように使用されていることがわかります（変更された.rowクラス）： http://foundation.zurb.com/docs/ （ページのソースコードを調べるだけ）

3
wasil

max-widthプロパティをmax-width: initial;としてオーバーライドするだけです。たとえば、

    .fullWidth {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       max-width: initial;
    }

<div class="row fullWidth"> </div>

これは私のために働く:)

2
Able Alias

行クラスを維持したい場合は、グリッドシステムの多くのパワーを失うことになります。 $ rowWidthの設定を1000（デフォルト）から100％に変更しないのはなぜですか。これはファイルfoundation_and_overrides.scssで見つけることができます

1
stephen

設定するだけ

$row-width: 100%;

http://foundation.zurb.com/forum/posts/927-full-width-layouts

1
Philip

何か不足しているのかどうかはわかりませんが、.row divの.centered動作します。私はまだ.headerこの場合、全幅の背景を持ちますが、.containerメソッドは私のために機能しませんでした。

<header class="header">
  <div class="row">
    <div class="centered">
       Logo and stuff
    </div>
  </div>

  <div class="row">
    Some navigation stuff   
  </div>
</header>
0
Jordan

「行」クラスを指定せず、その中に列を配置すると、100％の幅で動作します

0
David 天宇 Wong

Sassを使用している場合、これはより良い方法です。

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

.row{
    &.full-width{ 
        width: 100%; 
        max-width: 100%!important; //might be needded depending on your settings
        &>.column:first-child,
        &>.columns:first-child{ 
            padding-left: 0; 
        }
        &>.column:last-child,
        &>.columns:last-child{ 
            padding-right: 0; 
        }
    }
}
0
Claudiu Creanga