ブートストラップの行の背景イメージは、親のグリッドの幅よりも広くなります

Question

私はブートストラップを使用しています。

このようにすると、z-index：1のdivの下にあるすべてのdivは、このdivの後ろにあります。

100％を使用した場合のdivも最大幅よりも広くなる

<div class="row" id="MENUROW"> 
    <div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div> 
</div> 
<div class="row" id="MAINROW"> <!-- this has the background-image --> 
    <div class="col-md-12" id="MAINCOLUMN"> 
    </div> 
</div> 

CSS：

#MENUROW 

    { 
    position: relative; 
    height: 80px; 
    background-color: transparent; 
    z-index: 2; 
    } 

#MAINROW 

    { 
    position: absolute; 
    z-index: 1; 
    top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */ 
    width: 100%; 
    background-image: url(../images/background.jpg); 
    background-size: cover; 
    } 

この背景画像をやっ幅より（右に）広い行きます親部門の

https://jsfiddle.net/2cs60vrr/3/たとえば、我々はあなたが探しているものか不明ですが、あなたは何をしたいということであれば、ちょうどそれがどうあるべきか、広い表示するには、背景の赤を作った、背景画像は

Answer 1

はるかに広い行く私は申し訳ありませんか？あなたのHTMLで.containerクラスを使用していなかった

.grid { 
    margin: 0 auto; 
    max-width: 100%; 
    width: 100%; 
    background-color: #fff; 
} 

.row { 
    width: 100%; 
    margin-bottom: 0px; 
    display: flex; 
} 

#MENUROW { 
    position: absolute; 
    height: 80px; 
    background-color: red; 
    z-index: 2; 
} 

#MAINROW { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    width: 100%; 
    max-width: 1400px; 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg); 
    background-size: cover; 
} 

https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/

Answer 2

ポイント1

。ブートストラップは最大の機能を得るための構造を持っています。 .containerを使用する必要があります。ブートストラップの構造は次のとおりです。

<div class="container"> 
    <div class="row"> 
     <div class="col-*-*"> 
      Your Content 
     </div> 
    </div> 
</div> 

この問題を解決するには、上記のようにHTMLを作成します。

ポイント2

あなたは、この問題を解決するために、任意の.rowに以下のコードを使用し、その後、あなたのhtmlを変更しない場合です。

margin-left:0; 
margin-right:0; 

Answer 3

ラッパーを全体に配置して、相対位置にする必要があります。 そして両方の行を配置する：絶対;

これだけです。

位置を使用している場合：絶対;ブロックは位置：relative;を持つ最も近い親htmlタグの絶対左上隅に移動します。 position：relativeを持つ親がない場合。絶対配置されたアイテムは、画面の左上隅に移動します。

（最初の行は、第二の親ではなく、それらは兄弟である。ラッパー「グリッド」は、2行の親である）

<div class="grid"> 
    <div class="row" id="MENUROW"> 
    <div class="col-md-12" id="MENUCOLUMN"> 
     <h1>SHOP</h1> 
    </div> 
    </div> 
    <div class="row" id="MAINROW"> 
    <div class="col-md-12" id="MAINCOLUMN"> 
     text 
    </div> 
    </div> 
</div> 

およびCSS

.grid { 
    position: relative; 
} 

.row { 
    width: 100%; 
} 

#MENUROW { 
    position: absolute; 
    background-color: red; 
    z-index: 1; 
} 

#MAINROW { 
    position: absolute; 
    z-index: 2; 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg); 
    background-size: cover; 
} 

更新された例を以下に示します： https://jsfiddle.net/2cs60vrr/6/