Boostrap 4コンテナ流体と同一のパディングをコンテナとする行

Question

私はブートストラップ4を使用してウェブサイトを作成しようとしていますが、問題が発生しました。

A badly drawn image of what I want

ページは、ヘッダとフッタの背景はページの端に広がるべきであるようにconatainer流体です。

ヘッダーとフッター内では、すべてが中央になるように、メニューとフッターの内容にコンテナが使用されます。

ヘッダーとフッターのコンステインは、同様の方法で動作するはずです（エッジの背景が伸びます）。しかし、片側が青、もう一方が白であるように、列を使用しています。これらの行の内容をヘッダフッター（ヘッダのメニューの左端がテキストと同じ場所になるように）に並べるようにします。

私はどこから始めるべきかを知りませんでした容器の液体の上に容器を重ねるが、行は一致しなかった。

私はこれまでに得たもののこのコードを作成した。

CSS：

.rowoverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
    bottom: 0; 
    right: 0; 
    height: 100%; 
} 

HTML

<div class="container-fluid homepage-text-plugin"> 

    <div class="row rowoverlay"> 
     <div class="col-md-12 col-lg-5" style="background-color: green;"></div> 
     <div class="col-md-12 col-lg-7" style="background-color: red;"> 

     </div> 

    </div> 

    <div class="container "> 

     <div class="row"> 
      <div class="col-md-12 col-lg-4 " style="background-color: blue;"> 
       A text block 
      </div> 
      <div class="col-md-12 col-lg-7" style="background-color: yellow;"> 
       More text<p> 
      </div> 

     </div> 
    </div> 

</div> 

enter link description here

Answer 1

あなたはCSSのフレキシボックスでこれをスタイルでした。おそらくあなたはそれを調べるべきです。ここでは、ひどく描画された画像のレイアウトのコードスニペットの例を示します。

.row-example { 
 
    display: flex; 
 
    background: red; 
 
    width: 100%; 
 
} 
 

 
.row-1-left { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 

 
.row-1-center { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: green; 
 
    justify-content: center; 
 
} 
 

 
.row-1-right { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
.row-2-left { 
 
    width: 1000px; 
 
    height: 200px; 
 
    background: yellow; 
 
} 
 

 
.row-2-right { 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 200px; 
 
    background: orange; 
 
} 
 

 
.row-3-left { 
 
    width: 1400px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 

 
.row-3-right { 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.row-4-left { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 

 
.row-4-center { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: green; 
 
    justify-content: center; 
 
} 
 

 
.row-4-right { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: yellow; 
 
}

<div class="container-fluid homepage-text-plugin"> 
 
    <div class="row-example"> 
 
    <div class="row-1-left"></div> 
 

 
    <div class="row-1-center"> 
 
     <p>Header container</p> 
 
    </div> 
 

 
    <div class="row-1-right"></div> 
 
    </div> 
 

 
    <div class="row-example"> 
 
    <div class="row-2-left"></div> 
 

 
    <div class="row-2-right"></div> 
 
    </div> 
 

 
    <div class="row-example"> 
 
    <div class="row-3-left"></div> 
 

 
    <div class="row-3-right"></div> 
 
    </div> 
 

 
    <div class="row-example"> 
 
    <div class="row-4-left"></div> 
 

 
    <div class="row-4-center"></div> 
 

 
    <div class="row-4-right"></div> 
 
    </div> 
 
</div>