html - <a> bootstrap 轮播中的 glyphicon 相互堆叠，我该如何消除这种行为？

Question

我有两个 <a>与字形图标的链接并且它们相互堆叠，我想删除这种行为，让它们并排显示。

这是它的一个 fiddle :

https://jsfiddle.net/9h1k2pta/1/

代码二<a>

<div class="carousel-control"
    style="bottom:auto; margin-left:auto; margin-right:auto;
    right:0;">
        <a href="#slideshow" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"
                style="font-size: 50px;"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a href="#slideshow" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"
                style="font-size: 50px;"></span>

            <span class="sr-only">Next</span>
        </a>

是的，我的 HTML 中有样式，不漂亮，等等。这只是一个测试。

我想将它们显示为常规箭头:< > 不像现在显示的那样。我怎样才能做到这一点？我已尝试删除 Chrome 中的继承样式，但仍然无法正常工作。

Answer 1

好吧，没关系。我设法做到了。

显然 bootstrap 有一个特定于 carousel-control 中每个人字形的规则，并且它有边距:

.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
       right: 50%;
       margin-right: -10px;

所以我只是覆盖它:

div.carousel-control > a > span.glyphicon-chevron-left {
    margin-left: -40px;