Question

我想使用自定义轮播指示器。我想使用三个div作为col-md-4类的指标。我的代码是：

<div class="row carousel-indicators">
            <div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
                First
            </div>
            <div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
                Second  
            </div>
            <div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
                Third
            </div>
        </div>

但是，它无法正常工作。单击任何选项卡时，div将折叠。

image screenshot here

请帮我解决这个问题。

编辑1：

完整的代码是：

<div class="container-fluid">
    <div id="homeCarousel" class="carousel slide" data-ride="carousel">

        <div class="container">
            <div class="row carousel-indicators">
                <div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
                    First
                </div>
                <div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
                    Second  
                </div>
                <div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
                    Third
                </div>
            </div>

        </div>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img style="width:100%;height:90%;" src="https://www.google.com/logos/doodles/2014/world-cup-2014-51-5668472285560832.2-hp.gif">
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                <img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                <img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
                <div class="carousel-caption">

                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

问题是Carousel JS正在使用active附加按钮类，它将其宽度覆盖为12px，高度为12px。请尝试以下代码。

.carousel-indicators .col-md-4.active {
  width: 33.33%;
  height: auto;
}

JSfiddle

Answer 2

你很亲密！由于Bootstrap使用媒体查询，因此每个特定类都适用于特定的屏幕大小。 Bootstrap文档的相关部分：

http://getbootstrap.com/css/#grid-options

以上链接描述了每种屏幕尺寸的行为。在您的代码中，您只需指定col-md-4类;通过添加col-sm-4 col-lg-4，您应该涵盖所有用例。

更新小提琴：http://jsfiddle.net/dmkzu8eL/2/

编辑：所以，我最初误解了这个问题。实质上，.active类被附加到与轮播中的活动项对应的轮播指示符上。此类根据px指定宽度，高度和边距，这就是它似乎崩溃的原因。使用以下CSS，我们可以阻止div完全折叠并将文本隐藏在：

中

#homeCarousel .carousel-indicators div.active
{
width:initial;
height:initial;
margin:initial;
}

话虽如此，它并不会阻止.active div缩小到其中包含的文本的大小，因为您仍然希望向用户指示轮播的位置，对吗？

更新了小提琴＃2：http://jsfiddle.net/dmkzu8eL/12/

管理轮播指示器的宽度

2 个答案: