Css 使用2个不同高度的引导导航条

我需要在我的web应用程序中使用2个导航栏

主导航栏的高度是我使用引导变量更改的：

$navbarHeight: 80px;

但我需要在第一个导航栏下添加一个40px高度的辅助导航栏

当前，该变量影响两个导航栏，并将它们设置为80px，即使我尝试更改辅助导航栏的CSS样式

---

有什么方法可以实现这一点吗？

因为您在变量前面使用了

$

，我想您是在使用Sass

1.向导航栏添加一个额外的类： 确保将其包含在Sass变量范围内或重新定义变量：

$baseLineHeight

---

演示

我不确定接受的答案是什么版本的引导，但它不适合我。这对引导程序3（sass）没有影响：

---

更改第二个导航栏的id或类别？因此，您可以单独设置样式，或创建一个navheight类，然后在导航栏中使用。因此，这只是一个示例，如果您发布了一些代码，说明您的使用可以调整设置是的，我正在使用SASS，并且您的解决方案看起来很有前景Bootstrap 2使用camelCase变量名，Bootstrap 3不使用。所以，公认答案中的例子不起作用是正常的。

<div class="navbar navbar-small">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

$navbarHeightSmall = 40px; 

.navbar-small{
    .navbar-inner{
        min-height: $navbarHeightSmall;
    }

    &.navbar{
        .brand {
            padding: (($navbarHeightSmall - $baseLineHeight) / 2) 20px (($navbarHeightSmall - $baseLineHeight) / 2);
        }

         .divider-vertical {
            height: $navbarHeightSmall;
        }

       .nav > li > a{
            padding: (($navbarHeightSmall - $baseLineHeight) / 2) 15px (($navbarHeightSmall - $baseLineHeight) / 2);
        }
    } 
}

$navbar-height-secondary: 40px
$navbar-padding-vertical-secondary: (($navbar-height-secondary - $line-height-computed) / 2)

.secondary-nav
  &.navbar
    min-height: $navbar-height-secondary
    .nav > li > a
      padding-top: $navbar-padding-vertical-secondary
      padding-bottom: $navbar-padding-vertical-secondary