這是小提琴： https: //jsfiddle.net/apo5u0mt/這是代碼：超文本標記語言<div class="modal" id="galleryModal"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"> <div class="modal-content"> <div class="gallery"> <div class="gallery-item"> <img src="https://preview.ibb.co/kPE1D6/clouds.jpg"> </div> <div class="gallery-item"> <img src="https://preview.ibb.co/mwsA6R/img7.jpg"> </div> <div class="gallery-item"> <img src="https://preview.ibb.co/kZGsLm/img8.jpg"> </div> </div> </div> </div></div><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#galleryModal">Modal</button>CSS.gallery { overflow-y: auto !important;}.gallery-item { margin: 5px; float: left;}.gallery-item img { height: 150px; width: 200px; object-fit: cover;}.btn { margin: 5px;}模態框的右側有一些額外的空間。我不想要那個空間。我希望模態適合內容，即圖像。我已經盯著這個太久了，非常感謝任何幫助。
1 回答
慕姐4208626
TA貢獻1852條經驗 獲得超7個贊
Bootstrap 正在這樣做：
.modal-dialog {
max-width: 500px;
}
該.modal-dialog元素是塊元素，因此默認情況下希望寬度為 100%，但 Bootstrap 的樣式將其寬度保持為 500px。
您明確將每張圖像的寬度設置為 200 像素，這（暫時忽略邊距）僅加起來為 400 像素。
兩個可能的修復方法是：
1. 在這里重寫 Bootstrap 的模態樣式，將模態限制為更窄的寬度：
/*
The value below is empirically tested,
allows for your given margins & floating. I originally expected it to be
420px = (200px width + 5px left margin + 5px right margin) * 2
but 422px was necessary to avoid wrapping when tested in jsfiddle
*/
.modal-dialog {
max-width: 422px;
}
https://jsfiddle.net/nftj9s7y/1/
如果圖像的寬度恰好為 200 像素很重要，那么這就是您的解決方案。然而，這對我來說似乎是一個脆弱的解決方案 - 如果您決定更改圖像寬度，它就會崩潰，并且可能無法在較小的屏幕尺寸下工作。
更靈活的解決方案是：
2.使用flexbox讓圖像擴展以填充模態框
.gallery {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
/* now that the parent element is display: flex, we don't need floats anymore */
.gallery-item {
padding: 5px;
width: 50%;
}
.gallery-item img {
height: 150px;
object-fit: cover;
width: 100%; /* allow image to fill width of containing element */
}
https://jsfiddle.net/vzs98n6b/2/
最后一點，除非您在該元素上指定或，.gallery { overflow-y: auto }否則不會有任何效果。heightmax-height
- 1 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消