Html 移除 Bootstrap Carousel 中的箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19075088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing arrows in Bootstrap Carousel
提问by lowcoupling
here is the homepage of my blog www.lowcoupling.com I'd like not show the left and right arrows in the bootstrap carousel I have tried
这是我博客的主页 www.lowcoupling.com 我不想在我尝试过的引导程序轮播中显示左右箭头
.glyphicon-chevron-right{
display:none;
}
(and the same thing for the left arrow) but it does not seem to work.
（和左箭头相同）但它似乎不起作用。
回答by azz
This will hide the buttons
这将隐藏按钮
.right.carousel-control, .left.carousel-control {
display: none;
}
If you still want to be able to click where the button is drawn, do:
如果您仍然希望能够单击绘制按钮的位置，请执行以下操作：
.right.carousel-control, .left.carousel-control {
opacity: 0;
filter:alpha(opacity=0); /* IE support */
}
回答by TheIronDeveloper
I took a quick gander, and you are almost there, but Bootstrap's css is taking precidence over your css. Bootstrap has:
我快速浏览了一下，您就快到了，但是 Bootstrap 的 css 优先于您的 css。Bootstrap 具有：
.carousel-control .glyphicon-chevron-right{
...
display:inline-block;
}
If you were to assign an arbitrary point value to this, Bootstrap is providing '2 points' to provide the style 'inline-block'.
如果您要为此分配任意点值，Bootstrap 将提供“2 点”以提供样式“inline-block”。
Because your css is loaded after Bootstrap, simply putting an extra class (and matching Bootstrap's 2 points) before ".glyphicon-chevron-right" should do the trick.
因为您的 css 是在 Bootstrap 之后加载的，所以只需在“.glyphicon-chevron-right”之前添加一个额外的类（并匹配 Bootstrap 的 2 点）就可以了。
.carousel .glyphicon-chevron-right{display:none;}
Or, if you want your override to be "stronger", putting an id in front gives your override a higher value (approx 256)
或者，如果您希望您的覆盖“更强”，则在前面放置一个 id 会使您的覆盖获得更高的值（大约 256）
#myCarousel .glyphicon-chevron-right{display:none;}
回答by Jaydutt Shukla
This will work,
这将工作，
.right.carousel-control,
.left.carousel-control
{
visibility:hidden;
}
回答by melih sahin
there is simple solve for that problem. Just remove "a" tags and with into span tags
有一个简单的解决方案。只需删除“a”标签并使用span标签
before
前
<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>
after solved
解决后
<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>
that's it
就是这样
