你可以像这样把它们推到滑块下面...

.carousel-indicators {
  bottom:-50px;
}

在转盘下方留出空间，以便按下的指示器不会干扰滑块下方的内容。

.carousel-inner {
   margin-bottom:50px;
}

∮ ∮ ∮

你可以简单地添加bootstrap类隐藏在indicator类之后，如下所示：

<ol class="carousel-indicators hidden">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

自定义项目分类div

<div class="item">
     <div class="col-mid-1"> &nbsp; </div>
         <div class="col-md-10"> your content </div> 
             <!-- Note total should not be greater than 12 that is 1 + 10 + 1 = 12--> 
             <div class="col-mid-1"> &nbsp; </div>
 </div>

当我不想在内容div上显示图标时，这对我很有效

问题是指示器是绝对定位的，因此您可以通过使元素ol.carousel-indicators相对定位来修复它。

<ol class="carousel-indicators" style="position: relative;">
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

现在指示器是流的一部分，所以您应该将指示器代码下推到div#carousel-example-generic之后。
下面是一个工作示例。

<div class="container">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-bottom: 3rem;">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>

      <div class="item">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>

      <div class="item">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

  </div>
  <!-- Indicators -->
  <ol class="carousel-indicators" style="position: relative;">
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
</div>
<!--//container -->

我添加了一些样式以使更改更加明显，例如margin-bottom到div#carousel-example-generic，添加了背景色：灰色的列表项目，并添加了一些图像从网络上让它的工作。
这个简单的改变就应该起作用。
与公认的答案相比，这种方法的优势在于，您不必猜测要应用多少余量来向下推指标，因为指标是流程的一部分，将根据需要移动内容。
Result demo, made using Bootstrap 5 (I also pushed carousel captions out of the slideshow)

您可以将border设置为0px，如下所示：

.carousel-indicators li{
  border: 0px;
}

您可以使用以下命令写入：

.carousel-indicators {
  display:none;
}