Question

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

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

$navbarHeight: 80px;

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

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

有没有办法实现这个目标？

Answer 1

由于您使用变量前面的$，我猜您使用的是Sass。

1。在导航栏中添加一个额外的类：

<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>

2。通过Sass

定义类

$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);
        }
    } 
}

请务必将其包含在Sass变量范围内或重新定义变量：$baseLineHeight。

JSFIDDLE上的演示

Answer 2

我不确定接受的答案适用于什么版本的Bootstrap，但它对我没有用。这适用于Bootstrap 3（sass）：

$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

使用2个不同高度的bootstrap导航栏

2 个答案:

1。在导航栏中添加一个额外的类：

2。通过Sass