Question

查看我的bootply

我有一个Bootstrap-3轮播，每次都有3个DIV显示。您可以左右单击以显示下一个3 x DIV。但我的指标是你可以点击的整个区域，灰色块。是否有可能只有＆gt; thingie可点击？另外，如何获得＆gt;在我的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旋转木马控制在外面

1 个答案: