我正在尝试创建 2 层平面图 slider ，这些 slider 设置在选项卡式内容中，以便用户可以在 1 间卧室的公寓和 2 间公寓之间单击。
我在选项卡中设置了 slider ，但是当我将图像放入它们显示在右侧时，我看不到任何 margin 或 padding 所以我不确定为什么会这样？
我尝试添加我在另一篇文章中找到的 img-fluid 类，但这没有做任何事情。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<section id="floorplans">
<div class="container">
<div class="row">
<div class="col-8">
<h1>Floor Plans</h1>
<p>Select your unit types<br> and browse our floorplans.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">
<div aria-orientation="vertical" class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a aria-controls="v-pills-home" aria-selected="true" class="nav-link active" data-toggle="pill" href="#v-pills-home" id="v-pills-home-tab" role="tab">1 bedroom</a> <a aria-controls="v-pills-profile" aria-selected="false" class="nav-link" data-toggle="pill"
href="#v-pills-profile" id="v-pills-profile-tab" role="tab">2 bedrooms</a>
</div>
</div>
<div class="offset-1 col-8">
<div class="tab-content" id="v-pills-tabContent">
<div aria-labelledby="v-pills-home-tab" class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
<div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
<div class="carousel-inner">
<div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
<div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
<div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
</div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next"
data-slide="next" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
</div>
</div>
<div aria-labelledby="v-pills-profile-tab" class="tab-pane fade" id="v-pills-profile" role="tabpanel">
<div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
<div class="carousel-inner">
<div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
<div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
<div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
</div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next"
data-slide="next" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
</div><a class="lnk-dwnl" href="">Download Floorplans (8)</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Floor Plans --> 
最佳答案
我意识到我的类与另一个 slider 有冲突，
为了定位，我添加的平面图正确
.carousel-inner {
background-color: #dadada;
}
.carousel-item img {
max-width: 500px;
margin: 0 auto;
padding: 50px 0;
}
关于html - Bootstrap slider 向右显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59609985/