【发布时间】：2021-01-15 01:36:58
【问题描述】：
我正在学习，tacher 向我们询问了一个带有轮播的统计页面。所以我想使用boostrap。轮播有点用，但我不知道如何使它居中，更重要的是，控件不起作用。
这里是相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS & BOOTSTRAP -->
<link rel="stylesheet" href="./css/bootstrap-4.5.2-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<title>Site Statique</title>
</head>
<body>
<div class="container">
<!-- ======================================================================== -->
<!-- CAROUSEL PLACEHOLDER -->
<!-- ======================================================================== -->
<div class="row">
<div class="col-md-12">
<div class="mx-auto">
<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-carousel d-block w-100"
src="./img/many_dices_1.png"
alt="First slide">
</div>
<div class="carousel-item">
<img class="img-carousel d-block w-100"
src="./img/dice_sheet.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="img-carousel d-block w-100"
src="./img/D_20.webp"
alt="Third 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>
</div>
<!-- ======================================================================== -->
<!-- EO CAROUSSEL -->
<!-- ======================================================================== -->
<!-- Scripts tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="./css/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script>
</body>
</html>
所以轮播可以正常工作，图片会滑动，但小图片没有居中，控件也不起作用。任何想法为什么？ 提前致谢
更新： 现在控件可以工作了，但我不知道如何使图像保持比例。这是我的 CSS 规则
.img-carousel{
width: auto;
height: 100%;
max-height: 500px;
}
【问题讨论】：
标签： html bootstrap-4 carousel