Question

为了在导航栏中将我想要的尺寸与我想要的尺寸相匹配，我将页面顶部固定导航栏的高度增加到80px。现在的问题是主动选择的区域的高度没有随导航栏改变。

我的HTML：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="./img/logo.png" alt="logo"/>
      </a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="./index.html">Home</a></li>
      <li><a href="./about-us.html">About Us</a></li>
      <li><a href="./products.html">Products</a></li>
      <li><a href="./contact.html">Contact</a></li>
      <li><a href="./jobs.html">Jobs</a></li>
      <li><a href="./clients.html">Clients</a></li>
    </ul>
  </div>
</nav>

我的自定义CSS覆盖bootstrap.css：

.navbar {
  min-height: 80px;
}

.navbar-brand {
  height: 80px;
}

Answer 1

如果您希望Navbar-Brand（徽标）与Navbar重叠，您可以使用这样的绝对定位：

.navbar-header {
  position: relative;
}
.navbar-brand {
  position: absolute;
  top: 0;
  height: 80px;
  background-color: red;
}

此笔中的示例：

如果想要按照徽标的高度展开导航栏，则需要调整导航栏的高度以及“.nav.navbar-nav”元素链接中的默认填充。最简单的方法是使用一个像gulp这样的预处理器，使用你自己的引导变量，或者从bootstrap调整自定义页面上的默认bootstrap less变量。 Absolute Position

此笔中的示例：Customize Boostrap

Answer 2

外部div（.navbar）的优先级高于内部（.navbar-brand），如果检查元素，则可能会看到“高度：80px”的删除线。试试“！important”

Answer 3

你应该确切知道bootstrap是如何工作的（看一下css文件）

    .navbar {
      min-height: 80px; // Default 50px 
    }

    .navbar-brand {
      height: 80px;
    }
    .navbar-nav > li > a {
      padding-top: 30px; // Default 15px
      padding-bottom: 30px; // Default 15px
    }

Answer 4

如果您希望徽标和导航按钮在显示为水平菜单时具有相同的高度，则可以使用下面的CSS。

@media规则存在，因此新规则不适用于小屏幕设备（例如手机），因为导航菜单在这些设备中以垂直模式显示，您不需要按钮在垂直菜单中显得特别高。

@media screen and (min-width:768px) {
  .navbar {
    min-height: 80px; 
  }
  .navbar-brand {
    height: 80px !important;
  }
  .nav>li>a {
    padding: 15px 30px !important;
    line-height: 50px !important;
  }
}

http://codepen.io/anon/pen/ezZxJw

导航栏高度变化不会影响活动区域

4 个答案: