在 Bootstrap Carousel 中移除箭头答案

【问题标题】：Removing arrows in Bootstrap Carousel在 Bootstrap Carousel 中移除箭头
【发布时间】：2020-10-01 21:38:30
【问题描述】：

这是我博客的主页 www.lowcoupling.com 我不想在引导轮播中显示左右箭头我试过了

.glyphicon-chevron-right{
     display:none;
}

（左箭头也一样）但它似乎不起作用。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这将隐藏按钮

.right.carousel-control, .left.carousel-control {
    display: none;
}

如果您仍然希望能够单击绘制按钮的位置，请执行以下操作：

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
}

【讨论】：

它有效，但我猜不是我预期的方式。我仍然希望轮播在右侧和左侧可点击有没有办法用透明箭头做到这一点？

【解决方案2】：

我看了一眼，你就快到了，但 Bootstrap 的 css 正在优先于你的 css。 Bootstrap 有：

.carousel-control .glyphicon-chevron-right{
    ...
    display:inline-block;
}

如果您要为此分配任意点值，Bootstrap 将提供“2 点”来提供样式“内联块”。

因为您的 css 是在 Bootstrap 之后加载的，所以只需在“.glyphicon-chevron-right”之前放置一个额外的类（并匹配 Bootstrap 的 2 个点）就可以了。

.carousel .glyphicon-chevron-right{display:none;}

或者，如果你想让你的覆盖“更强”，在前面放一个 id 会给你的覆盖一个更高的值（大约 256）

#myCarousel .glyphicon-chevron-right{display:none;}

【讨论】：

【解决方案3】：

这会起作用的，

.right.carousel-control, 
.left.carousel-control 
{
     visibility:hidden;
}

【讨论】：

【解决方案4】：

这个问题有一个简单的解决方案。只需删除“a”标签并使用跨度标签

之前

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

解决后

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

就是这样

【讨论】：