css - 引导按钮不起作用

Question

我有一个表格，我把它作为我的导航栏上的链接。我试图向它添加一个按钮，但它看起来很大，这是我的表单：

<btn class="btn btn-inverse pull-right">
  <ul class="nav pull-right">
      <li class="dropdown" id="menuLogin">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
        <div class="dropdown-menu" style="padding:17px;">
          <form class="form" id="formLogin"> 
            <input name="username" id="username" type="text" placeholder="Username"> 
            <input name="password" id="password" type="password" placeholder="Password"><br>
            <button type="button" id="btnLogin" class="btn">Login</button>
          </form>
        </div>
      </li>
    </ul>
  </btn>

和我的小提琴：

http://jsfiddle.net/kPNG7/

Answer 1

你有很多填充物

.navbar .nav>li>a {
float: none;
padding: 10px 15px 10px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}

将填充减少到padding: 2px 5px;

Answer 2

您的下拉菜单不应该在按钮本身内，而是它的兄弟具有必要的属性： http: //getbootstrap.com/2.3.2/javascript.html#dropdowns

那，你有嵌套的下拉菜单。您需要更仔细地备份和重建。