CSS 如何使 Bootstrap 4 轮播图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42390931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap 4 carousel images responsive?
提问by NiZa
Hopfully the title and the demo say it all. The new carousel of Bootstrap 4 isn't responsive. The images are out of their aspect ratio.
好在标题和演示说明了一切。Bootstrap 4 的新轮播没有响应。图像超出其纵横比。
Does somebody know how to solve this without doing major adjustments in the css and html?
有人知道如何在不对 css 和 html 进行重大调整的情况下解决这个问题吗？
.wrapper {
max-width:200px;
width:100%;
}<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide">
</div>
</div>
</div>
</div>回答by
You do not need a wrapper or something like that. The default styling for the .active .carousel-item is display: flex.
您不需要包装器或类似的东西。.active .carousel-item 的默认样式是 display: flex。
You will need to add
您需要添加
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
to your custom css.
到您的自定义 css。
回答by Piyali
Just add this bellow css,
只需添加这个波纹管CSS，
<style>
.wrapper {
max-width:200px;
width:100%;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display: block !important;
}
</style>
i hope it will work fine...
我希望它能正常工作...
