在Bootstrap轮播图中去除箭头

Question

这是我的博客主页 www.lowcoupling.com 我不想在Bootstrap走马灯中显示左右箭头。 我已经尝试过

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

（左箭头同理。） 但似乎并不起作用。

- lowcoupling

Answer 1

这将隐藏按钮

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

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

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

- azz

---

它能工作，但我想不是我预期的方式。我仍然希望旋转木马在右侧和左侧可点击，有没有办法用透明箭头实现这一点？ - lowcoupling

Answer 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;}

- TheIronDeveloper

Answer 3

这将会起作用，

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

- Jaydutt Shukla

Answer 4

这个问题有一个简单的解决方法。只需将“a”标签和“with”替换为“span”标签即可。

之前

    <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>

就是这样

- melih sahin