为什么整个部分都没有显示背景？
为什么整个部分都没有显示背景？
提问于 2020-04-12 05:40:18
我正在试图弄清楚为什么我的灰色背景在整个部分都没有显示出来。我将所有内容都嵌入到了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&bg=55595c&fg=eceeef&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&bg=55595c&fg=eceeef&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&bg=55595c&fg=eceeef&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 {
position: absolute;
z-index: 1;
}
.card-img-top {
height: 225px;
width: 100%;
display: block;
}
#mid-section {
background-color: #DCDCDC;
}
.pic-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
padding-top: 350px;
position: relative;
}
.container {
padding: 50px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-12 06:02:00
当使用网格系统时，结构设置为您的宽度。将构件添加到栅格中，将生成高度。将.card定位为绝对将折叠高度。因此，你的背景颜色将是不可见的，或者可能只对添加的填充可见，因为填充也会生成高度。
.card { position: relative; }同样值得注意的是，在Bootstrap 4中引入了flex-box，您的结构现在将在单行内的所有列上生成相同的高度。这在过去用等高计算来覆盖，但现在已经过时了。
.card { height: 100% } /*is your equal height*/更好的是，使用Bootstrap卡片组，您不再需要列。只需在媒体查询和/或flex-grow、flex-shrink中调整flex-basis，如果需要拉伸/缩小大小。这进一步简化了结构。
祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61164045
复制相关文章
相似问题
腾讯云开发者
