Question

为什么我无法更改Bootstrap navbar的高度，我不是navbar上的粗样式，所以我将其更改为height:20px !important;但它仍然是同样的。

知道如何更改navbar身高吗？

的CSS，

.el-menu {
    height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid red;
}

.nav ul {
    -webkit-border-radius:0 !important;
    -moz-border-radius:0 !important;
    border-radius:0 !important;
}


.nav, .nav li, .nav a {
    margin:0 !important;
    padding:0 !important;
    border:1px solid blue;
}

HTML，

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top el-menu" role="navigation">

    <div class="navbar-collapse collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Template <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Add</a></li>
            <li><a href="#">Manage</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">News</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Add</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
            <li><a href="#">Blog</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Add</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
          </ul>
        </li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Setting <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Comment</a></li>
                <li><a href="#">Design</a></li>
            </ul>
        </li>
        <li><a href="#">Logout</a></li>
      </ul>


    </div><!--/.nav-collapse -->


</div>

Answer 1

您需要完全匹配CSS选择器。我相信设置高度的Bootstrap类是navbar，因此您需要在站点的CSS文件中覆盖它。

Bootstrap CSS：

.navbar {
  position: relative;
  z-index: 1000;
  min-height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

此致：

.navbar {
    min-height: 0;
    height: 20px;
}

请注意，可能有其他类设置了高度，您可以在Firefox，Chrome或IE中使用Firebug / developer模式找到它，但一般原则是相同的：使用您自己的默认设置覆盖默认设置。确保在Bootstrap之后加载CSS文件，以便优先使用您的设置。

Bootstrap下拉列表：更改导航栏的高度？

1 个答案: