Question

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

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

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

Answer 1

这将隐藏按钮

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

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

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

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

Answer 3

这将有效，

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

Answer 4

有一个简单的解决方案。只需删除“ a”标签并将其插入span标签

之前

app/config/parameters.yml

解决后

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

就这样

删除Bootstrap Carousel中的箭头

4 个答案: