我試圖找出為什么我的灰色背景沒有出現在整個部分。我將所有內容嵌入到 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> </div> </div> </div> </div>
1 回答
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
使用網格系統時，結構會根據您的寬度進行設置。將組件添加到網格中，將生成高度。使.card絕對定位會折疊高度。因此，您的背景顏色將不可見，或者可能僅對于添加的填充可見，因為填充也會生成高度。
.card { position: relative; }另外值得一提的是，Bootstrap 4 引入了彈性盒，您的結構現在將在單行內的所有列上生成相同的高度。過去，這曾被等高計算覆蓋，但現在已過時。
.card { height: 100% } /*is your equal height*/更好的是，使用 Bootstrap 卡組，您不再需要列。如果您需要拉伸/縮小尺寸，只需調整flex-basis媒體查詢中的 和/或。這進一步簡化了結構。flex-growflex-shrink
祝你好運！
- 1 回答
- 0 關注
- 123 瀏覽
添加回答
舉報
0/150
提交
取消