引導電網，填充問題引起後臺溢出

使用自舉V4，當我添加背景顏色爲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; }

來源

2016-10-26 Patrick McDermott

顯示您的問題提琴或codepen鏈接。我們無法完全弄清楚你的問題。它是這樣的： [link]（http://codepen.io/inewton/pen/GjLjzj）。 @Patric –

@AmitKumar我已經解決了這個問題，但我會在一分鐘內添加一個鏈接到codepen –

我找到了解決問題的方法。添加第二個內部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; }

來源

2016-10-26 13:21:04

引導電網，填充問題引起後臺溢出

回答

相關問題