5

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

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

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

4

4 回答 4

21

这将隐藏按钮

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

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

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
}
于 2013-09-29T06:21:48.550 回答
1

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

.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;}
于 2013-09-29T06:27:14.873 回答
0

这将起作用，

.right.carousel-control, 
.left.carousel-control 
{
     visibility:hidden;
}
于 2016-07-10T02:50:31.100 回答
0

这个问题有一个简单的解决方案。只需删除“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>

而已

于 2019-03-29T06:43:20.140 回答