我有一个包含旋转木马的Bootstrap 4模态,我想用700px x 450px大小的图像填充模态的整个主体,在图像的左/上/右周围没有边框/边距/填充。我希望页脚可见,因此我可以放置一些文本和关闭按钮
这里是Codepen
这是我要通过图像外观实现的类似示例,请忽略所有非图像。
<div class="container">
<h1 class="display-4 text-center mb-4">Sample Modal</h1>
<div class="row mb-4">
<div class="col text-center">
<a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Click to open Modal</a>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<!-- carousel -->
<div
id='carouselExampleIndicators'
class='carousel slide'
data-ride='carousel'
>
<ol class='carousel-indicators'>
<li
data-target='#carouselExampleIndicators'
data-slide-to='0'
class='active'
></li>
<li
data-target='#carouselExampleIndicators'
data-slide-to='1'
></li>
<li
data-target='#carouselExampleIndicators'
data-slide-to='2'
></li>
</ol>
<div class='carousel-inner'>
<div class='carousel-item active'>
<img class='img-size' src='https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1391&q=80' alt='First slide' />
</div>
<div class='carousel-item'>
<img class='img-size' src='https://images.unsplash.com/photo-1491555103944-7c647fd857e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' alt='Second slide' />
</div>
<div class='carousel-item'>
<img class='img-size' src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' alt='Second slide' />
</div>
</div>
<a
class='carousel-control-prev'
href='#carouselExampleIndicators'
role='button'
data-slide='prev'
>
<span class='carousel-control-prev-icon'
aria-hidden='true'
></span>
<span class='sr-only'>Previous</span>
</a>
<a
class='carousel-control-next'
href='#carouselExampleIndicators'
role='button'
data-slide='next'
>
<span
class='carousel-control-next-icon'
aria-hidden='true'
></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
.img-size{
/* padding: 0;
margin: 0; */
height: 450px;
width: 700px;
background-size: cover;
overflow: hidden;
}
.modal-body {
width: 700px;
height: 450px;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
width: 30px;
height: 48px;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
width: 30px;
height: 48px;
}
您应该将width
放在.modal-content
中,而不是.modal-body
。然后从padding
中删除.modal-body
。这是修改后的CSS:
.modal-content {
width: 700px;
}
.modal-body {
padding: 0;
}
希望它能解决您的问题。