这是 fiddle :https://jsfiddle.net/apo5u0mt/
这是代码:
HTML
<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;
}
模态框右侧有一些额外的空间。我不想要那个空间。我希望模态适合内容,即图像。我已经盯着这个太久了,非常感谢任何帮助。
最佳答案
Bootstrap 正在这样做:
.modal-dialog {
max-width: 500px;
}
.modal-dialog
元素是 block 元素,因此默认宽度为 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/
最后一点,除非您指定 height
或 max-height,否则
在该元素上。.gallery { Overflow-y: auto }
不会产生任何效果
关于html - 如何删除此 Bootstrap 4 模式右侧的多余空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60535772/