为什么整个部分的背景不显示

Question

我试图找出为什么我的灰色背景没有出现在整个部分。我将所有内容嵌入到 ID 为 mid-section 的部分中。我在 css 中将中间部分的背景颜色设置为灰色，但它没有显示在整个屏幕上。如何让背景颜色显示在整个屏幕上？<section id="mid-section"><div class="pic">  <img class="pic-image" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bbq-party-grilled-sausages-1561576780.jpg?crop=1.00xw:0.753xh;0,0.0562xh&resize=1200:*" alt="bbq"></div><div class="container">  <div class="row">    <div class="col-lg-4 col-md-6">      <div class="card mb-4 box-shadow">        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">        <div class="card-body">          <h5 class="card-title">Best Burgers</h5>          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>          <div class="d-flex justify-content-between align-items-center">            <small class="text-muted"></small>          </div>        </div>      </div>    </div>    <div class="col-lg-4 col-md-6">      <div class="card mb-4 box-shadow">        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">        <div class="card-body">          <h5 class="card-title">Best Burgers</h5>          </div>        </div>      </div>    </div>

Answer 1

使用网格系统时，结构会根据您的宽度进行设置。将组件添加到网格中，将生成高度。使.card绝对定位会折叠高度。因此，您的背景颜色将不可见，或者可能仅对于添加的填充可见，因为填充也会生成高度。

.card { position: relative; }

另外值得一提的是，Bootstrap 4 引入了弹性盒，您的结构现在将在单行内的所有列上生成相同的高度。过去，这曾被等高计算覆盖，但现在已过时。

.card { height: 100% } /*is your equal height*/

更好的是，使用 Bootstrap 卡组，您不再需要列。如果您需要拉伸/缩小尺寸，只需调整flex-basis媒体查询中的 和/或。这进一步简化了结构。flex-growflex-shrink

祝你好运！