Bootstrap 4 轮播指示器位置调整

Question

我正在设计一个Bootstrap 4的轮播图，我需要将轮播指示器放在左上角。但我还需要让它们与上面的导航垂直对齐，导航是包在Bootstrap的.container类里面的。

由于我知道我表达的很糟糕，这里有一张图片直接展示我的意思:

如果我使用绝对定位，并添加 top:0, left:0 (或其他数字)，则位置会随着屏幕大小的变化而移动，不符合导航的位置。

下面是我代码的大纲：

.carousel-indicators {
  top: 10px;
  left: 0;
  right: auto;
}

.carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.carousel-indicators li:not(:last-child) {
  margin-right: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="container">
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

<div id="carousel" 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>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Fourth slide">
    </div>
  </div>
</div>

我该如何实现这个目标？最好的方法是什么？

谢谢！

- Retros

---

我们如何将指示器位置设置为顶部中心？看起来稍微向左。 - hiFI

Answer 1

只需覆盖 carousel-indicator 的 justify-content 和 margin，然后按照以下方式添加填充即可。还要将指示器包装在容器内，并通过添加预定义的 class position-relative 将其设置为 position:relative。

.my-slider .carousel-indicators {
  top: 10px;
  justify-content:flex-start;
  margin:0;
  padding-left:15px;
  padding-right:15px;
}

.carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.carousel-indicators li:not(:last-child) {
  margin-right: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="container">
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

<div id="carousel" class="my-slider carousel slide" data-ride="carousel">
  <div class="container position-relative">
  <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>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>
 </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/800x300" alt="Fourth slide">
    </div>
  </div>
</div>

- Pushparaj

---

就是这样了！谢谢，Raj！ - Retros