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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:45:15  来源:igfitidea点击:

How to position the bootstrap carousel controls to the extreme right and extreme left?

csshtmltwitter-bootstrap

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