Bootstrap-3 个旋转木马控件在外面

Question

我有一个 Bootstrap-3 轮播，每次显示 3 x DIVs。您可以左右单击以显示接下来的 3 x DIVs。但是我的指示器是一个你可以点击的整个区域，灰色块。是否可以只让 > thingie 可点击？另外，如何让 > 东西在我的 DIV 之外，现在它与我的内容重叠？谢谢！

HTML:

<div class="carousel slide" data-ride="carousel" id=
"carousel-example- generic">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target=
        "#carousel-example-generic"></li>

        <li data-slide-to="1" data-target="#carousel-example-generic"></li>

        <li data-slide-to="2" data-target="#carousel-example-generic"></li>
    </ol><!-- Slider Content (Wrapper for slides )-->

    <div class="carousel-inner">
        <div class="item active">
            <div class="col-md-4 col-sm-6">
                <p>
             aaaaaaaaaaaaaaaaaaaa</p>
            </div>

            <div class="col-md-4 col-sm-6 hidden-xs">
                <p>bbbbbbbbbbbbbb</p>
            </div>

            <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                <p>cccccccccccccc</p>
            </div>
        </div>

        <div class="item">
            <div class="col-md-4 col-sm-6">
                <p>dddddddddddddd</p>
            </div>

            <div class="col-md-4 col-sm-6 hidden-xs">
                <p>eeeeeeeeeeeeee</p>
            </div>

            <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                <p>ffffffffffffff</p>
            </div>
        </div>
    </div>
</div><!-- Controls -->
<a class="left carousel-control" data-slide="prev" href=
"#carousel-example-generic"><span class=
"glyphicon glyphicon-chevron-left"></span></a> <a class=
"right carousel-control" data-slide="next" href=
"#carousel-example-generic"><span class=
"glyphicon glyphicon-chevron-right"></span></a>

CSS:

.carousel-indicators li { visibility: hidden; }

.carousel-inner .item {
font-size:10px;
color:#0404B4
}

.carousel-control {
z-index: 10;
top: 2%;
font-family: 'Helvetica Neue', Arial, sans-serif;
}

Answer 1

我已经更新了你的css。

/* CSS used here will be applied after bootstrap.css */
.carousel-indicators li { visibility: hidden; }

.carousel-inner .item {
    font-size:10px;
    color:#0404B4
    }

.carousel-control {
    z-index: 10;
    top: 2%;
    width: 30px; // no more gray thing
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.carousel-control.left,
.carousel-control.right { background: none }
// change it according to your needs
.carousel-control.left { left: -10px; }
.carousel-control.right { right: -10px; }

Demo

Bootstrap-3 个旋转木马控件在外面

Bootstrap-3 carousel controls on outside

html

css

twitter-bootstrap

twitter-bootstrap-3