Html 如何将 bootstrap carousel 控件定位到最右侧和最左侧?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31316645/
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
How to position the bootstrap carousel controls to the extreme right and extreme left?
提问by Abdul Qhayum
I have an image slider and I want the right and left controls to be positioned to the extreme right and extreme left respectively. and it should work for all widths.
我有一个图像滑块,我希望右侧和左侧控件分别位于最右侧和最左侧。它应该适用于所有宽度。
Is that possible ??
那可能吗 ??
回答by Patel
You can change their positioning by changing carousel-control
's width. In my view, 4% is great. You can change it to whatever you want.
您可以通过更改carousel-control
的宽度来更改它们的位置。在我看来,4% 很好。您可以将其更改为您想要的任何内容。
.carousel-control {
width: 4%
}
回答by Manoj Kumar
you can update the element style
您可以更新元素样式
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
right: 0; //or you can increase this
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
left: 0; //or you can increase this
}
回答by Tom Jardine-McNamara
Having checkout out the sample code on Bootstrap's docs, it looks like a very simple CSS tweak:
查看 Bootstrap 文档上的示例代码后,它看起来像一个非常简单的 CSS 调整:
.carousel-control.left .glyphicon {
left: 0;
margin-left: 0;
}
.carousel-control.right .glyphicon {
right: 0;
margin-right: 0;
}
回答by Naveen Gouda
<!-- Left and right controls -->
<a class="left carousel-control" href="mainHomeCarouse" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="mainHomeCarouse" role="button" data-slide="next"> </a>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>