css - Bootstrap 按钮不起作用

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>

还有我的 fiddle :

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;