如何将引导轮播控件定位到极右和极左？答案

【问题标题】：How to position the bootstrap carousel controls to the extreme right and extreme left?如何将引导轮播控件定位到极右和极左？
【发布时间】：2016-12-03 06:34:39
【问题描述】：

我有一个图像滑块，我希望将右侧和左侧控件分别定位在最右侧和最左侧。它应该适用于所有宽度。

这可能吗？

【问题讨论】：

请发布一些示例代码 - 更容易为您提供帮助。

标签： css html twitter-bootstrap

【解决方案1】：

您可以通过更改carousel-control 的宽度来更改它们的位置。在我看来，4% 很棒。您可以将其更改为您想要的任何内容。

.carousel-control {
    width: 4%
}

【讨论】：

【解决方案2】：

你可以更新元素样式

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

【讨论】：

非常感谢大家。你所有的答案都很好。但很遗憾，我只能接受 1 个。

【解决方案3】：

签出sample code on Bootstrap's docs，它看起来像是一个非常简单的CSS调整：

.carousel-control.left .glyphicon {
    left: 0;
    margin-left: 0;
}
.carousel-control.right .glyphicon {
    right: 0;
    margin-right: 0;
}

【讨论】：

【解决方案4】：

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

【讨论】：