Twitter Bootstrap下拉按钮不起作用?

时间:2014-05-27 05:38:28

标签: javascript jquery css twitter-bootstrap twitter-bootstrap-3

我是twitter bootstrap的初学者,我正在尝试从http://getbootstrap.com/中给出的示例创建一个下拉按钮,但它似乎不起作用。请帮忙... 这是我的代码......

        <div class="btn-group">
            <button type="Button" class="btn btn-primary dropdown-toggle">
                Login As 
                  <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="/Home/Admin">Admin</a></li>
                <li><a href="/Home/Employee">Employee</a></li>
                <li><a href="/Home/Other">Other User</a></li>
            </ul>
        </div>

这是我的fiddle

3 个答案:

答案 0 :(得分:2)

您需要在按钮标记中包含此内容:

data-toggle="dropdown"

答案 1 :(得分:1)

您错过了data-toggle="dropdown"

<button type="Button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Updated fiddle

答案 2 :(得分:0)

亲爱的,请参阅jsfddle demo DEMO

的链接

添加库jquery-1.11.0      bootstrap.mini.css      docs.mini.css      bootstrap.mini.js      docs.mini.js

<强> HTML

 <nav role="navigation" class="navbar navbar-inverse">
        <div class="navbar-header">
            <div class="navbar-brand">MySample Login</div>
        </div>
    </nav>
    <div class="container">
        <form class="form-group col-xs-5">
            <label>UserName</label>
            <input type="text" class="form-control" placeholder="User Name" />

            <label>Password</label>
            <input type="password" class="form-control" placeholder="Password" />
            <br />
            <div class="btn-group">
                <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    login<span class="caret"></span>
  </button>

                <ul class="dropdown-menu">
                    <li><a href="/Home/Admin">Admin</a></li>
                    <li><a href="/Home/Employee">Employee</a></li>
                    <li><a href="/Home/other">Other User</a></li>
                </ul>
            </div>
            <button class="btn btn-success" type="reset">Clear</button>
        </form>
    </div

&GT;