Question

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

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，您将以35px的速度剪切导航栏内的内容。这看起来很糟糕，并不适合想要更大字体等的人。

我认为您应该调整导航栏内的元素，如下所示：

.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;
}

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

2 个答案: