我試圖找出為什么我的灰色背景沒有出現(xiàn)在整個(gè)部分。我將所有內(nèi)容嵌入到 ID 為 mid-section 的部分中。我在 css 中將中間部分的背景顏色設(shè)置為灰色，但它沒有顯示在整個(gè)屏幕上。如何讓背景顏色顯示在整個(gè)屏幕上？<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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊
使用網(wǎng)格系統(tǒng)時(shí)，結(jié)構(gòu)會(huì)根據(jù)您的寬度進(jìn)行設(shè)置。將組件添加到網(wǎng)格中，將生成高度。使.card絕對(duì)定位會(huì)折疊高度。因此，您的背景顏色將不可見，或者可能僅對(duì)于添加的填充可見，因?yàn)樘畛湟矔?huì)生成高度。
.card { position: relative; }另外值得一提的是，Bootstrap 4 引入了彈性盒，您的結(jié)構(gòu)現(xiàn)在將在單行內(nèi)的所有列上生成相同的高度。過去，這曾被等高計(jì)算覆蓋，但現(xiàn)在已過時(shí)。
.card { height: 100% } /*is your equal height*/更好的是，使用 Bootstrap 卡組，您不再需要列。如果您需要拉伸/縮小尺寸，只需調(diào)整flex-basis媒體查詢中的 和/或。這進(jìn)一步簡化了結(jié)構(gòu)。flex-growflex-shrink
祝你好運(yùn)！
- 1 回答
- 0 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消