管理轮播指标的宽度

Question

I want to use custom carousel-indicators. I want to use three divs for the indicators of col-md-4 class. My code is:

<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>

But, it is not working properly. On clicking any of the tab, the div collapses.

Please help me to solve this.

Edit 1:

The full code is:

<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

The problem was that the Carousel JS was appending the class of the buttons with active which overrides its width to 12px and height to 12px. Try the below code.

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

JSfiddle

Answer 2

You are close! Since Bootstrap uses media queries, each particular class applies to a certain screen size. Relevant part of Bootstrap documentation:

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

The above link describes behavior at each screen size. In your code, you only specify the col-md-4 class; by adding col-sm-4 col-lg-4 , you should cover all use cases.

Updated Fiddle: http://jsfiddle.net/dmkzu8eL/2/

EDIT: So, I misread the question initially. Essentially, the .active class is appended to the carousel indicator corresponding to the active item in the carousel. This class specifies a width, height, and margin in terms of px , which is why it appears to collapse. Using the following CSS, we can stop the div from collapsing fully and hiding the text within:

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

With that said, it doesn't stop the .active div from shrinking down to the size of the text contained within, as you still would like to indicate to the user the position of the carousel, correct?

Updated Fiddle #2: http://jsfiddle.net/dmkzu8eL/12/