html - 无法更改导航栏 bootstrap3 中的按钮高度

Question

我在更改导航栏中的按钮高度时遇到问题。
这是我想要的:http://bit.ly/1NTJ4UE
这是我得到的: http://bit.ly/19hlu4E
我尝试使用 padding 和 marging，但情况变得更糟。谁能举例说明如何做我想做的事？

这是我使用的一段代码:

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="icons/logo_footer_42x57.png"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <div class="nav navbar-nav navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Account</a></li>
          <li><a href="#">Deposit</a></li>
          <li><a href="#">Withdrawal</a></li>
        </ul>
        <ul class="nav navbar-nav group" styles="border: 1px solid #479ccf;">
          <li><a href="">Log in</a></li>
          <li class="divider-vertical"></li>
          <li><a href="">Sign up</a></li>
        </ul>            

      </div>
    </div>
  </div>
</nav>

我的CSS文件:

.divider-vertical {  
    height: 25px;  
    margin: 12px 0px 5px;  
    border-left: 1px solid #333;  
    border-right: 1px solid #479ccf;  
}  

nav a {  
    list-style-type: none;  
    display: inline;  
}  
ul.nav.navbar-nav.group {  
    border: 1px solid #479ccf;  
}

Answer 1

这可能不是最佳选择，因为其中一个 css 规则使用了 !important。

我为登录和注册制作了 1 个额外的 css 类 user

HTML 的变化

<ul class="nav navbar-nav group" styles="border: 1px solid #479ccf;">
   <li><a href="" class="user">Log in</a></li>
   <li class="divider-vertical"></li>
   <li><a href="" class="user">Sign up</a></li>
</ul>

CSS

改变分隔线的高度和边距

.divider-vertical {
    height: 15px;
    margin: 7px 0px 5px;
}

在链接组的顶部添加边距

ul.nav.navbar-nav.group {
    margin-top: 9px;
}

减少文本填充的新类

.user {
    padding: 5px 15px !important;
}

JSFIDDLE