Bootstrap轮播控制内联指标

时间:2015-05-02 06:00:36

标签: twitter-bootstrap twitter-bootstrap-3 carousel

默认情况下,指标位于底部,控件分别位于左侧和右侧。

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

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

0 个答案:

没有答案