Question

我已经阅读了5-6个问题/答案，但无法找到我正在寻找的内容_ Bootstrap 4列的行为与我期望的不同。低于约600px的器件宽度，边缘溢出而不是继续减小尺寸

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;
}

提前感谢您提供的任何指导：）

Answer 1

您将margin: 1rem;放在.outerDivBorder上，该边距将内容推送到小屏幕上。在col上使用填充 - 可以通过使用实用程序类进行填充来完成，在这种情况下为py-3：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

遇到了类似的问题。在我身上，这是因为

* {
  box-sizing: inherit;
}

Bootstrap 已经将其重置为 border-box，并且 col 和 row 的行为也相应于此。

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

2 个答案: