0

(story1 DIV)を入れbootstrap carouselましたが、機能せず、story1 のタブのみが表示されます。これを修正するには?bootstrap tabsdroptabsdropNOTE: 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 に答える