管理轮播指标的宽度

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折叠。

请帮我解决这个问题。

编辑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;
}

JS小提琴

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/