1

ブートストラップを使用して固定幅のページで作業していますが、iPhoneでテストすると、全幅のヘッダーとフッターの背景が幅の70％にクリップされていることに気付きました。

これはビジネスマーケティングタイプのサイトであり、通常はオフィスのPCからサプライヤーを探す人々が頻繁に訪れるため、応答性の側面は必須ではありませんでしたが、私は逸脱します。

問題に戻る

フルサイズの画面で表示すると、本来のように見えますが、コンテナクラスの制限（この場合は940px）よりも小さくスクロールしてから少し後ろにスクロールすると、背景がトリミングされていることがわかります。

私はしばらくの間それをいじくり回していて、すべてを取り除き、ネストされたdivの単純な束を入れてテストし、問題がルージュタグではないことを確認しましたが、それでもまったく同じことを行います。

この問題は、コンテナのクラスにラップされていないアイテムに関連していると思いますが、全幅のパネルと940pxの固定コンテンツが必要な場合、ブートストラップでどのようにそれを達成するのかわかりません。

// This Fails
<body>
    <header class="fullwidth">
        <div class="container">
            <p>The content</p>
        </div>
    </div>
</body>

// This is fine but not full width
<body>
    <header class="container">
        <p>The content</p>
    </header>
</body>

ブートストラップまたは自分のスタイルを一緒に削除して、手動でボディのスタイルを変更しても、ブートストラップは偽和されていません。しかし、それは累積的な問題のようです...

誰かが前にこれに出くわしますか？

可能であれば、ブートストラップを削除する必要はありません。

要求に応じて、リンクを追加しました：http: //jsfiddle.net/NcZFz/3/

jsfiddleでビューポートのサイズに気付いた場合、ヘッダーはそれを埋めますが、ビューポートのみです。また、MAcを使用していて、Magic Mouse（またはその他）を使用している場合は、そのビューポートを右にスクロールして白を表示できます。しかし、これは端から端まであるはずなので、白があってはなりません。

4

1 に答える 1

1

にマージンがあるようです<ul id="menu-primary-navigation">

#menu-primary-navigation { margin-left: 0; }

そして、あなたも同じ要素を身につける必要があります.clearfix（子供が浮いているため）

<ul id="menu-primary-navigation" class="clearfix">

この動作中のjsfiddleを確認してください。

.navbar .navクラス（およびアソシエート）を使用した場合、上記のすべての修正を回避できます。ドキュメントを読んでください。

于 2012-08-09T09:50:26.353 に答える