我如何获得全高Bootstrap导航按钮？

默认引导导航做到这一点时，屏幕太小：我如何获得全高Bootstrap导航按钮？

的“酒店”按钮下方的差距不应该在那里，当我悬停在链接，它是由“私人所致租用'文本太长，导致浏览量有所下降。

有什么办法让白色背景占据导航的全高？

来源

2016-11-24 ERushforth

ü可以在这里提供乌尔示例代码 – SMW

它实际上是建立在.NET作为CMS的一部分，所以它不会有太大的帮助，但它是建立在相同的方式为http://getbootstrap.com/components/#navbar – ERushforth

我一直在寻找twitter bootstrap导航栏，我找到了摆脱那个空白的方法。

很简单....

.navbar-nav{ 
    white-space: nowrap; 
} 

@media (min-width: 1200px){ 
    .navbar-nav { 
     font-size: 22px; 
    } 
} 
@media (min-width: 994px) and (max-width: 1199px){ 
    .navbar-nav { 
     font-size: 17px; 
    } 
} 
@media (max-width: 994px){ 
    .navbar-nav { 
     font-size: 15px; 
    } 
}

来源

2016-11-25 12:40:23

更新2：

现在我知道了。正如我在UPDATE 1声明中写道，它是基于自举导航栏的默认实例

<style> a {  color: #fff; } 

.navbar { 
    background-color: #122B41 !important; 
    color: #fff; 
       height:100px; } 

.navbar > div { height:100% !important; } 

.navbar > div > div { height:100% !important; } 

.navbar > div > div > ul { height:100% !important; } 

.navbar > div > div > ul > li { height:100% !important; } 

.navbar > div > div > ul > li > a { height:100% !important; } 

.navbar-collapse.collapse {  height:100% !important; } </style>

：请检查该css代码。这是否解决您的问题？

更新1：

我创建了一个空白页面，只是从bootstrap页面默认navbar例子。我刚刚通过css（请参阅style区域）添加了一些颜色，以更好地显示navbar的颜色。这是我的默认页面的代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"></meta> 
<link rel="stylesheet" href="bootstrap.min.css"></link> 
<link rel="stylesheet" href="bootstrap-theme.min.css"></link> 
<link rel="stylesheet" href="bootstrap-theme.min.css.map"></link> 
<style> 
a { 
    color: #fff; 
} 

.navbar { 
    background-color: #122B41 !important; 
    color: #fff; 
} 
</style> 
<script type="text/javascript" src="jquery-1.12.2.min.js"></script> 
<script type="text/javascript" src="bootstrap.min.js"></script> 
<script type="text/javascript" src="npm.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-primary"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <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="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 
</body> 
</html>

我不知道，因为默认的导航栏，正好有希望的“全高”。请参阅我的截图：

也许你提供你的navbar的代码和你的页面的附加css？

ORIGINAL：

您可以通过css相应地设置链接的line-height属性为您导航栏的高度。

.navbar-nav>li>a { 
    line-height: <height_of_your_navbar>px; 
}

来源

2016-11-24 16:49:08

不幸的是，只是按钮的高度膨胀而不是跨越nav的全部高度（当通过CMS添加/删除按钮时，高度可能会发生变化）。我希望能找到一些能将身高达到100％的导航，但我还没有运气！ – ERushforth

请参阅我的最新更新... –

我如何获得全高Bootstrap导航按钮？

回答

相关问题