Question

我的页面上有两个导航栏，第一个（.tob-bar）我显示我的社交媒体，第二个我有导航菜单

<nav class="navbar navbar-inverse no-margin top-bar">
        <div class="container">

            // social media here ...

        </div><!-- /.container-fluid -->
</nav><!-- /.navbar -->


<nav class="navbar navbar-inverse no-margin">
        <div class="container">

            // nav menu here ...

        </div><!-- /.container-fluid -->
</nav><!-- /.navbar -->

如何将.top-bar的高度设置为降低px？我试过了设置

.top-bar {
   height: 20px!important;
}

但似乎不起作用，它仍然具有bootstrap的默认值。我也尝试检查萤火虫的任何高度值，但没有运气

Answer 1

我还试图检查萤火虫的任何身高值，但没有运气

那是因为Bootstrap对min-height: 50px;使用了.navbar。 min-height属性始终会覆盖height和max-height。您需要按如下方式声明.top-bar值：

.top-bar {
  min-height: 20px !important;
}

这是一个例子

.top-bar {
  min-height: 60px; /* overrides height and max-height */
  height: 25px;
  max-height: 50px;
}

如果身高＆gt; min-height，反之亦然，最大的值将是渲染的值。

Bootstrap - 减小导航栏的大小

1 个答案: