我有這樣的html代碼
<div class="container-fluid" style="height:calc(100vh - 120px)">
<div class="row h-100" style="margin-top:20px;">
<div class="col-lg-10 col-md-12 col-xs-12 h-100 div-border-shadow mx-auto " >
<div class="row mt-3">
<div class="col-lg-10 col-md-12 col-sm-12 text-center mx-auto">
<div id="gallery" class="clearfix">
@for (int i =0; i<8 ; i )
{
<div class="gallery-div-format d-inline-block" style="width:200px; height:200px; background-color:red">
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
它制作了這樣的頁面
這是CSS
.div-border-shadow {
width: 100%;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.gallery-div-format {
margin-left: 10px;
margin-right: 10px;
border-radius: 10px;
box-shadow: 0 5px 5px 3px rgba(0,0,0,0.4);
}
但是為了檢查頁面是否回應（當我縮小瀏覽器時）它變成了這樣
如您所見，白色背景不會延伸，只要紅色框重復，我希望白色背景延伸。我的代碼的哪一部分是錯誤的？
uj5u.com熱心網友回復：
如果您h-100從下面的標簽中洗掉類，它會正確顯示：
...
<div class="col-lg-10 col-md-12 col-xs-12 h-100 div-border-shadow mx-auto ">
...
</div>
....
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/466341.html
上一篇：我不知道如何制作這3列布局