Question

这是我正在努力的一个精简版本。有一个包含多个滑块的页面，每个滑块在同一页面上都有自己的指示器。我正在尝试将.carousel-indicators li嵌套在相应的部分中，但是，指标在该特定部分的范围内没有响应。如果我把它从部分（非嵌套）中取出，可以正常工作。这显然会导致跟随滑块与自己的指标发生冲突。

注意：jfiddle只是例如，它似乎在那里工作正常，但在sass中造型。

感谢您的任何建议。

//编辑：这是jfiddle与scss的链接，可以更准确地查看问题“https://jsfiddle.net/rickthewebdev/7tbLbbvy/26/”

.carousel-item {
  height: 100vh;
  width: 100%;
  min-height: 300px;
  background: no-repeat center center scroll;
  background-size: cover;
}

#section-1 {
  h1 {
    position: absolute;
    font-size: 4em;
    color: #ffff;
  }
  .carousel-indicators li {
    background-color: #fff;
    border: 1px solid #dae1ed;
    position: relative;
    bottom: 50px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- BEGIN SECTION 1 -->
<div id="section-1">

  <!-- SLIDER BEGIN -->
  <div class="container-fluid" id="content">
    <div id="indicators-slide-1" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="indicators-slide-1" data-slide-to="0" class="active"></li>
        <li data-target="indicators-slide-1" data-slide-to="1"></li>
        <li data-target="indicators-slide-1" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner" role="listbox">
        <!-- Slide One-->
        <div class="carousel-item active" style="background-image: url('https://dummyimage.com/1920x800/000/fff')">

          <h1> slide 1</h1>

        </div>
        <!-- .carousel-item -->

        <!-- Slide Two-->
        <div class="carousel-item" style="background-image: url('https://dummyimage.com/1920x800/000/fff')">

          <h1> slide 2</h1>

        </div>
        <!-- .carousel-item -->

        <!-- Slide Three-->
        <div class="carousel-item" style="background-image: url('https://dummyimage.com/1920x800/000/fff')">

          <h1>slide 3</h1>

        </div>
        <!-- .carousel-item -->
      </div>
      <!-- .carousel-inner -->

      <!-- Controls -->
      <a class="carousel-control-prev" href="#indicators-slide-1" 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="#indicators-slide-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- controls -->
  </div>
  <!-- .container-fluid -->
</div>
<!-- .section-1 -->

Answer 1

没关系，不能嵌套BS4轮播，不支持。通过为每个指标添加其他自定义类来找到解决方法。

Bootstrap 4 Carousel指标嵌套在带有SASS的部分时没有响应

1 个答案: