33

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

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

これを修正する方法を探してみましたが、選択肢がありません。これはfoundation.cssファイルの小さな修正だと思いますが、私はまだ慣れていないので、現時点では圧倒されすぎています。

どんなポインタでも大歓迎です。

4

15 に答える 15

67

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

<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>
于 2012-10-19T15:57:45.907 に答える
12

Zurb Foundation Framework を使用している場合は、単純にクラスを削除し、100% 幅rowのクラスで要素をラップします。containerおそらく、ものを中央に配置したい場合は、次のようにクラスを使用しますcentered。

<div class="container navigation">
    <div class="centered">
        Some navigation stuff
    </div>
</div>
于 2012-09-05T00:09:58.493 に答える
8

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

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

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

于 2012-08-01T13:33:04.030 に答える
2

すでに多くの回答があることは承知していますが、誰かが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/ (ページのソース コードを調べてください)

于 2014-07-06T10:59:46.727 に答える
2

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

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

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

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

于 2014-04-15T08:52:45.877 に答える
1

行クラスを保持したい場合は、グリッド システムの多くの機能が失われます。$rowWidth の設定を 1000 (デフォルト) から 100% に変更しないでください。これは、foundation_and_overrides.scss ファイルにあります。

于 2013-02-12T13:25:18.093 に答える
1

設定するだけ

$row-width: 100%;

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

于 2014-09-03T11:05:50.307 に答える
0

何か不足しているかどうかはわかりませんが、動作させるには.rowdivを追加する必要があり.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>
于 2013-01-01T23:12:12.557 に答える
0

「行」クラスを指定せずに列を内部に配置すると、幅 100% で動作します

于 2013-02-04T23:28:17.247 に答える
-1

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; 
        }
    }
}
于 2015-06-18T10:23:11.013 に答える