Question

我有一个固定顶部的自举导航，高度为120px，导航本身看起来像我想要的那样。但当它移动大小时，链接与导航栏的高度相同。我无法弄清楚我错过了什么..

.navbar {
    background-color: rgba(0, 0, 0, .6);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);    
    min-height:120px !important;    
}

.navbar-nav > ul, li {
    padding: 0px 15px;  
}

.contain-pull{
    max-width: 93%;
    margin: 0 auto 0 auto;
}

.navbar-nav > li > a, .navbar-brand {
    padding-top:50px !important; 
    padding-bottom:0 !important;
    height: 120px;  
}

.navbar a {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 300px;
    font-family: 'Oswald', sans-serif;  
    text-decoration: none;
}

.navbar a:hover{
    color:#258faf !important;
}

.navbar {
    border: 0px;
}

.logo {
    display: block; 
    text-decoration: none;
    max-height: 95px;
    margin: 12px 0px 0px 0px;   
    width: auto;
}

@media (max-width: 960px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        margin-top: 40px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Answer 1

在小型设备中可以看到用于导航栏（120px）的大屏幕高度是正常的。保持 Navbar 的高度很小。如果你想在你可以玩的大型设备中增加导航栏的高度，请注意 <a>的填充（导航内的锚点）如果您在html中观察到切换按钮，则会抛出一个类;

class="navbar-toggle collapsed" data-toggle="collapse"

当toggle-button打开时，它将该类抛出为;

class="navbar-collapse collapse in"

现在根据上述课程，您可以设置导航栏<a>标记的样式。

我希望这能帮助你实现目标。

Answer 2

您可以简单地将链接规则放在媒体查询中：

@media (min-width: 960px) {
  .navbar.navbar-tall .navbar-nav > li > a {
    padding-top: 50px;
    padding-bottom: 0;
    height: 120px;
  }
}

此示例会在导航栏折叠后将链接高度保持为默认设置。

工作示例：使用 FullPage 打开示例并缩小浏览器大小。

＆＃13;

.navbar.navbar-tall {
  background-color: rgba(0, 0, 0, .6);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  min-height: 120px;
  border: 0px;
}
.navbar.navbar-tall .navbar-nav > li > a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300px;
  font-family: 'Oswald', sans-serif;
  text-decoration: none;
}
.navbar.navbar-tall .navbar-nav > li > a:hover {
  color: #258faf;
}
.navbar.navbar-tall .navbar-brand {
  padding-top: 50px;
  padding-bottom: 0;
  height: 120px;
}
@media (min-width: 960px) {
  .navbar.navbar-tall .navbar-nav > li > a {
    padding-top: 50px;
    padding-bottom: 0;
    height: 120px;
  }
}
@media (max-width: 959px) and (min-width: 768px) {
  .navbar.navbar-fixed-bottom .navbar-collapse,
  .navbar.navbar-fixed-top .navbar-collapse {
    max-height: auto;
    overflow-x: visible;
  }
}
@media (max-width: 959px) {
  .navbar .navbar-header {
    float: none;
  }
  .navbar .navbar-left,
  .navbar .navbar-right {
    float: none !important;
  }
  .navbar .navbar-right {
    margin-right: 0px;
  }
  .navbar .navbar-right~.navbar-right {
    margin-right: 0;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-top: 42.50px;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar .navbar-collapse.collapse {
    display: none!important;
    overflow: visible!important;
  }
  .navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .collapse.in {
    display: block !important;
    overflow-y: auto;
  }
  .navbar .navbar-nav .dropdown-menu > li > a,
  .navbar .navbar-nav .dropdown-menu > li > a:hover,
  .navbar .navbar-nav .dropdown-menu > li > a:focus {
    color: #777;
  }
  .navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top navbar-tall">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

bootstrap navbar高度问题

2 个答案: