Bootstrap 4列溢出而不是調整大小

Question

我已閱讀5-6個問題/答案，但找不到要查找的內容_ Bootstrap 4列的行爲並不像我期望的那樣。低於約600px的設備寬度的邊緣溢出，而不是繼續在尺寸上減少

at 618px the columns are still reducing

at 538px the columns are overflowing

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-9 col-md-12"> 
      <div class="outerDivBorder" id="photoBox"> 
       <div style="height: 10em;"></div> 
      </div><!-- /#photoBox --> 
     </div> 

     <div class="col-lg-3 col-md-12"> 
      <div class="outerDivBorder" id="dataBox"> 
       <div style="height: 10em;"></div> 
      </div><!-- /#dataBox --> 
     </div> 
    </div> 
</div><!-- /.container --> 

CSS：

.outerDivBorder { 
    width: 100%; 
    border: 1px solid #454343; 
    padding: 0 1rem; 
    margin: 1rem; 
    margin-top: 1.5rem; 
    margin-bottom: 2rem; 
} 

預先感謝在t上提供任何指導他的：）

Answer 1

您把margin: 1rem;放在.outerDivBorder上，並且該邊距將內容推送到小屏幕上。使用填充上col！而非 - 它可以通過在這種情況下使用填充實用類，py-3做到：

.outerDivBorder { 
 
    width: 100%; 
 
    border: 1px solid #454343; 
 
    padding: 0 1rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-9 col-md-12 py-3"> 
 
      <div class="outerDivBorder" id="photoBox"> 
 
       <div style="height: 10em;"></div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-3 col-md-12 py-3"> 
 
      <div class="outerDivBorder" id="dataBox"> 
 
       <div style="height: 10em;"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>