中央のコンテナを使用した全幅の背景色

Question

私はBootstrap V4を使用しています。containerクラスには、ページの中央に2列の赤と緑のcol-md-6があります。

ただし、左側に赤い背景を追加し、右側に緑色を追加して、100％の幅を塗りつぶします。

私のhtml

<section style="background-color:green"> 
     <div class="container" > 
     <div class="row"> 
      <div class="col-md-6"> 
      <section> 
       <div id="hvc-dyk"> 
       <header> 
        <h1>Did you know...</h1> 
        <p id="dyk-large">80</p> 
        <p> 
        Lorum ipsum 
        </p> 
       </header> 
       </div> 
      </section> 
      </div> 
      <div class="col-md-6"> 
      <section> 
       This is hre 
      </section> 
      </div> 
     </div> 
     </div> 
    </section> 

Answer 1

あなたはこれをシミュレートする背景として、線形グラデーションを使用することができます。

body { 
    background: -webkit-linear-gradient(left, #f00 50%, #27a31a 50%); 
    background: -moz-linear-gradient(left, #f00 50%, #27a31a 50%); 
    background: -o-linear-gradient(left, #f00 50%, #27a31a 50%); 
    background: linear-gradient(to right, #f00 50%, #27a31a 50%); 
} 

例：https://jsfiddle.net/cqq5e8t1/1/