Question

我在导航栏中更改按钮高度时遇到问题这是我想要的：http://bit.ly/1NTJ4UE
这是我得到的： http://bit.ly/19hlu4E我试图玩填充和游戏，但情况变得更糟。任何人都可以举例说明我想做什么吗？

这是我使用的一段代码：

 <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

无法在navbar bootstrap3中更改按钮高度

1 个答案: