ブートストラップグリッド、背景がブートストラップのV4を使用して

Question

状況

をオーバーフローさせるパディングの問題、と私はdivに背景色を追加するとき、要素はその列内の他のすべての要素を持つ非整列になるように見えます。私はbox-sizing: border-boxを適用しましたが、それはそのコンテナ内に留まっていません。前にこの問題はなかった。

目指す

HTMLその列内の要素を維持するために

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> 

<section class="container padding-bottom--md"> 
    <div class="row"> 
     <div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md"> 
      <h5 class="text-uppercase txt--white">Lorem Ipsum</h5> 
      <p class="txt--white no-margin-bottom">A load of pish posh text</p> 
     </div> 
     <div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md"> 
      <h5 class="text-uppercase txt--white">Lorem Ipsum</h5> 
      <p class="txt--white no-margin-bottom">A load of pish posh text</p> 
     </div> 
    </div>       
</section> 

CSS

* { box-sizing: border-box; } 


.padding-top--sm { padding-top: 1rem; } 
.padding-bottom--sm { padding-bottom: 1rem; } 

Answer 1

私はこの問題を解決する方法を見つけました。パディングなしでコンテンツを保持するために、もう1つの内側のdivを追加します。

HTML

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 bg--white text-md-center padding-top--md"> 
       <div class="bg--orange padding-info-inner-md"> 
        <h5 class="text-uppercase txt--white">Resource centre</h5> 
        <p class="txt--white no-margin-bottom">Got a question? Have you checked our knowledge bank and help guides?</p> 
       </div> 
      </div> 
     </div>     
    </div> 
</section> 

CSS

.bg--orange { background: #e64b3c; } 
.bg--white { background: #FFFFFF } 
.padding-info-inner-md { padding: 2rem; }