html - 外部的 Bootstrap-3 旋转木马控件

Question

查看我的 bootply

我有一个 Bootstrap-3 轮播，每次显示 3 个 DIV。您可以向右和向左单击以显示下一个 3 x DIV。但是我的指示器是一个你可以点击的整个区域，灰色 block 。是否可以只让 > 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