Bootstrap 与指标内联的轮播控件

Question

默认情况下，指示器在底部，控件分别在左侧和右侧。

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
    </ol>
    <!--/Carousel indicators-->
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <h2>Item 1</h2>
        </div>
        <div class="item">
            <h2>Item 2</h2>
        </div>
        <div class="item">
            <h2>Item 3</h2>
        </div>
        <div class="item">
            <h2>Item 4</h2>
        </div>
    </div>
    <!--/Carousel items-->
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    <!--/Carousel nav-->
</div>

显示控件与指示器内联的最佳方式是什么？我想要实现的是将左控件放置在指示器的左侧，将右控件放置在指示器的右侧。内联，相同高度，垂直对齐。

Answer 1

这实际上有点难以实现，因为轮播控件是用百分比垂直放置的，而轮播指示器是用像素垂直放置的。你不能只改变一个或另一个而不做一点修改。最好的办法是对两者都使用位置百分比并根据自己的喜好对其进行调整，但您还必须更改 .carousel-control {height:20px} 以使其与指标的高度相匹配。此外，您还必须考虑 V 形字体大小从平板电脑到 phone 大小的变化。因此，您还必须通过 @media 查询更改垂直高度百分比。这是 fiddle 中的粗略示例，其中包含一些非常简单的 css 更改。显然，您可以根据自己的喜好按百分比调整它。 Jake's Fiddle

Bootstrap 与指标内联的轮播控件

Bootstrap carousel controls inline with indicators

carousel

twitter-bootstrap

twitter-bootstrap-3