Html 为什么整个部分的背景没有显示出来

我想弄明白为什么我的灰色背景没有在整个部分显示出来。我把所有的东西都嵌入了中间部分的id。我有中间部分的背景颜色为灰色的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>
          <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>
          <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>

---

使用网格系统时，结构将根据您的宽度进行设置。将构件添加到栅格将生成高度。将

.card

定位为绝对将折叠高度。因此，您的背景色将不可见，或者可能仅用于添加的填充，因为填充也会生成高度

.card { position: relative; }

同样值得一提的是，在Bootstrap4中引入了FlexBox，您的结构现在将在一行中的所有列上生成相同的高度。在过去，这一点曾包含在等高计算中，但现在已经过时

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

更好的是，有了引导卡组，你就不再需要列了。只需在媒体查询中调整

flex-basis

，和/或

flex-grow

，

flex-short

，如果需要拉伸/缩小尺寸。这进一步简化了结构

---

祝你好运

使用网格系统时，结构会根据您的宽度进行设置。将构件添加到栅格将生成高度。将

.card

定位为绝对将折叠高度。因此，您的背景色将不可见，或者可能仅用于添加的填充，因为填充也会生成高度

.card { position: relative; }

同样值得一提的是，在Bootstrap4中引入了FlexBox，您的结构现在将在一行中的所有列上生成相同的高度。在过去，这一点曾包含在等高计算中，但现在已经过时

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

更好的是，有了引导卡组，你就不再需要列了。只需在媒体查询中调整

flex-basis

，和/或

flex-grow

，

flex-short

，如果需要拉伸/缩小尺寸。这进一步简化了结构

---

祝你好运

.card{位置：相对；}

也许？特别是在网格系统中，将它们绝对定位是没有意义的，因为容器将崩溃。感谢Tim解决了这个问题。我很感激，我不敢相信这么简单的事情会让我如此紧张。没问题，我已经为任何需要它的人澄清了答案。干杯

.card{position:relative；}

也许吧？特别是在网格系统中，将它们绝对定位是没有意义的，因为容器将崩溃。感谢Tim解决了这个问题。我很感激，我不敢相信这么简单的事情会让我如此紧张。没问题，我已经为任何需要它的人澄清了答案。干杯