twitter-bootstrap - ブートストラップヘッダーバックグラウンドモバイルデバイス

Question

私は次のものを持っています：

<header class="container-fluid" id="header">...</header>

これには背景画像が適用されており、デスクトップビューで画面の全幅に広がっています。ただし、ウィンドウのサイズをモバイルデバイスのサイズに変更すると、側面の周りに余分な白いパディングが発生します。これは、背景が画面全体を覆っていないことを意味し、実際には内部のコンテンツと同じです。

これを達成するための最良の方法は何ですか？ノート。背景は、ページ全体ではなく、ページのヘッダーセクションのみに使用されます。

ありがとう

score 1 · Accepted Answer

767 ピクセル以下の視点では、Bootstrap はボディの左右に 20 ピクセルのパディングを追加します。

@media (max-width: 767px){
body {
padding-right: 20px;
padding-left: 20px;
}
}

したがって、ヘッダーの背景を全幅に広げたい場合は、これをオーバーライドする必要があります。

次のようなものがうまくいくはずです。

@media (max-width: 767px){
#header {
padding-right: -20px;
padding-left: -20px;
}
}

幸運を！

twitter-bootstrap - ブートストラップ ヘッダー バックグラウンド モバイル デバイス