如何在不同高度的同一页面上有两个 Bootstrap 导航栏？

Question

在同一页面上使用带有两个导航栏的 Bootstrap 3.0。高度变量将调整两个 .navbar 块。我尝试添加另一个类来覆盖第一个导航栏的高度，但它不受影响。

Bootply example

HTML：

<!-- Site Tools and Search Navbar -->
<div class="navbar siteTools">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control input-sm" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default btn-sm">Submit</button>
    </form>
    <div class="collapse navbar-collapse">     
      <ul class="nav navbar-nav pull-right">
        <li><a href="#">Site Tool Link</a></li>
        <li><a href="#">Site Tool Link</a></li>
        <li><a href="#">Site Tool Link</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<!-- Primary Navbar -->
<div class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown active">
          <a href="http://www.google.com/" class="dropdown-toggle" data-toggle="dropdown">Menu #1 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #2 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #3 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
          </ul>
        </li>        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #4 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
          </ul>
        </li>        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #5 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
          </ul>
        </li>        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #6 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
          </ul>
        </li>        
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS：

.navbar {
  border-radius: 0px;
}
.siteTools {
  margin-bottom: 0px;
  background-color:#cdcdcd;
  border:none;
}

Answer 1

我知道另一个答案已被标记为正确，但我认为指定高度不是解决此问题的正确方法。

即使您覆盖默认的最小高度并将其设置为 0，菜单仍然很高，这是因为导航栏中元素的填充和边距。通过显式设置height: 35px，您将在导航栏中以 35 像素切割内容。这看起来很糟糕，对于想要更大字体等的任何人来说都不是很好。

我认为您应该像这样调整导航栏中的元素：

.siteTools {
  min-height:0;
  margin-bottom: 0px;
  background-color:#cdcdcd;
  border:none;
}

.siteTools .nav > li > a {
  padding: 7px 10px;
  font-size: 12px;
}

.siteTools form[role="search"] {
  margin: 4px 0;
}

.siteTools form[role="search"] input {
  padding: 3px 5px;
  height: 25px;
}

.siteTools form[role="search"] button[type="submit"] {
  padding: 3px 5px;
  height: 25px;
}

Working demo here.

Answer 2

这应该对您有所帮助。 min-height 阻止将元素缩小到其值以下。

.navbar {
  border-radius: 0px;
}
div.siteTools.navbar {
  height:35px;
  min-height:35px;
  margin-bottom: 0px;
  background-color:#cdcdcd;
  border:none;
}