0

我输入bootstrap carouselbootstrap tabsdrop(story1 DIV)但tabsdrop没有工作并且只显示标签story1。如何解决这个问题?NOTE: carousel worked.

代码:(放在carousel标签中id="story1"

<div class="divTabDemo">
            <h1>Tabs demo 3</h1>
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#story1" data-toggle="tab">Story #1</a></li>
                <li><a href="#story2" data-toggle="tab">Story #2</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#story3" data-toggle="tab">Story #3</a></li>
                        <li><a href="#story4" data-toggle="tab">Story #4</a></li>
                        <li class="divider"></li>
                        <li><a href="http://bootstrapdemos.scripting.com/">More Bootstrap Demos</a></li>
                        </ul>
                    </li>
                </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="story1">
                    <div class="row">
        <div class="span12">
            <div class="carousel slide" id="carousel-211208">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-211208">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-211208">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-211208">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img alt="" src="http://lorempixel.com/1600/500/sports/1">
                        <div class="carousel-caption">
                            <h4>
                                First Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="http://lorempixel.com/1600/500/sports/2">
                        <div class="carousel-caption">
                            <h4>
                                Second Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="http://lorempixel.com/1600/500/sports/3">
                        <div class="carousel-caption">
                            <h4>
                                Third Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                </div> <a data-slide="prev" href="#carousel-211208" class="left carousel-control">‹&lt;/a> <a data-slide="next" href="#carousel-211208" class="right carousel-control">›&lt;/a>
            </div>
                    </div>
                <div class="tab-pane fade" id="story2">
                    <p>Eventually these demos degrade into nonsense like the stuff you're reading now. This is just here as a placeholder. Normally you'd have something here that means something. In this case this means nothing. To anyone. At all. Thank you.</p>
                    </div>
                <div class="tab-pane fade" id="story3">
                    <p>It's nice that you can also include dropdown menus in your tab arrangement. That's useful if you run out of room for all the tabs you'd like to include. That is, if there are tabs that you have that aren't as important as all the rest. </p>
                    </div>
                <div class="tab-pane fade" id="story4">
                    <p>That's about it for now. Hope you're having a great day. Luckily I just ran out of pseudo things to write about. Because if I had to keep on going at this for much longer I'd lose my mind. Ooops there it went. La lala la lala la!</p>
                    </div>
                </div>
            </div></div>

现场演示在这里

4

1 回答 1

0

故事 2、3 和 4 的内容是内幕故事 1 的内容:

<div class="tab-pane fade in active" id="story1">

把它们移到外面。

请从jsfiddle复制 html !

于 2013-09-06T14:49:25.457 回答