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

Question

我已经阅读了 5-6 个问题/答案，但找不到我想要的内容。 Bootstrap 4 的列没有按照我的预期行事。在大约 600 像素的设备宽度以下，边缘会溢出，而不是继续缩小。

在 618 像素处，列仍在缩小

在 538 像素处，列溢出

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

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

- inputforcolor

Answer 1

你在 .outerDivBorder 上使用了 margin: 1rem;，这个 margin 会在小屏幕上将内容推出。相反，应该在 col 上使用 padding，可以使用 py-3 这个 utility class 来实现：

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

- fen1x

Answer 2

我曾经遇到过类似的问题。在我的情况下，这是因为

* {
  box-sizing: inherit;
}

Bootstrap已经将其重置为border-box，列和行的行为也会相应地发生变化。

- Badal Saibo