0

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

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

$navbarHeight: 80px;

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

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

有没有办法做到这一点？

4

2 回答 2

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上的演示

于 2013-03-21T11:44:21.340 回答
0

我不确定接受的答案适用于哪个版本的 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
于 2014-08-25T03:38:53.910 回答