html - Bootstrap slider 向右显示图像

Question

我正在尝试创建 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 -->

Answer 1

我意识到我的类与另一个 slider 有冲突，

为了定位，我添加的平面图正确

.carousel-inner {

    background-color: #dadada;

}

.carousel-item img {

    max-width: 500px;
    margin: 0 auto;
    padding: 50px 0;
}