twitter-bootstrap 带有下拉菜单的 Twitter 引导导航药丸

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21876834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:05:40  来源:igfitidea点击:

Twitter bootstrap nav-pills with dropdown

csstwitter-bootstrapdrop-down-menu

提问by trante

I created nav-pills with Twitter bootstrap 3.
Everything is fine except dropdowns.
Documentation shows the layout for tab links, but not for the content: http://getbootstrap.com/components/#nav-dropdowns

我用 Twitter bootstrap 3 创建了导航药丸
。除了下拉菜单外,一切都很好。
文档显示选项卡链接的布局,但不显示内容:http: //getbootstrap.com/components/#nav-dropdowns

I want to show content when user selects one of the dropdown links.

我想在用户选择下拉链接之一时显示内容。

Fiddle is like this: http://jsfiddle.net/mavent/skL5H/3/

小提琴是这样的:http: //jsfiddle.net/maven/skL5H/3/

<div class="tabbable">
    <ul class="nav nav-tabs nav-pills" id="myTab">
        <li class="active"> <a href="#tab1" data-toggle="tab">Part 1</a>

        </li>
        <li class=""> <a href="#tab2" data-toggle="tab">Part 2</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Activity <span class="caret"></span></a>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#tab3">Action</a>
                </li>
                <li><a href="#tab4">Another action</a>
                </li>
            </ul>
        </li>
    </ul>
    <br>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">aaaaaaaaaaaa</div>
        <div class="tab-pane" id="tab2">bbbbbbbbbbbb</div>
        <div class="tab-pane" id="tab3">cccccccccccccc</div>
        <div class="tab-pane" id="tab4">dddddddddddddd</div>
    </div>
</div>

回答by vonUbisch

Add data-toggle="dropdown"to the links in the .dropdown-menu.

添加data-toggle="dropdown".dropdown-menu.

http://jsfiddle.net/skL5H/5/

http://jsfiddle.net/skL5H/5/