Question

我试图在调整页面大小后将导航栏的高度设置为40px，但是当我把它放大并调整网页大小时，导航栏的高度高于40px，我尝试了

@media (min-width:768px){
    #barranavegacion{
        background-color:#333; 
        border: none;   
        height: 40px;
    }
}

该网站是：http://vuelos.gangatravel.es/，可在调整页面大小后轻松查看我的问题。

Navbar代码：

<nav class="navbar navbar-inverse navbar-fixed-top" id="barranavegacion" >
    <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand">
            <img style="max-width:100px; margin-top: -7px;" src="http://pixelup.wc.lt/up/img/cc3c887b0f.png" />
        </a>
    </div>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="nav navbar-nav">
        <li class="active"><a style="font-size: 14pt;" href="#">Vuelos <span class="sr-only">(current)</span></a></li>
        <li><a style="font-size: 14pt;" href="http://hoteles.gangatravel.es/" target="_blank">Hoteles</a></li>
        <li><a style="font-size: 14pt;" href="#">Coches</a></li>
        <li><a style="font-size: 14pt;" href="http://rutas.gangatravel.es/es/s/" target="_blank">Rutas</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://www.youtube.es/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/29ed8fbcb8.png"/></a></li> 
        <li><a href="http://www.twitter.es/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/ffb14b6235.png"/></a></li> 
        <li><a href="http://www.facebook.es/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/c38838d8fa.png"/></a></li>    
        <li><a href="https://plus.google.com/"><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/73a02977d4.png"/></a></li>
      </ul>
    </div>
    </div>
</nav>

Answer 1

试试这个：

@media (min-width:768px){
    #barranavegacion{
        background-color:#333; 
        border: none;   
        height: 40px !important;
        max-height: 40px !important;
    }
}

Answer 2

引导程序min-height: 50px; css问题：@media (min-width:768px){ #barranavegacion{ background-color:#333; height: 40px; min-height: 40px; } }

container-fluid

重要提示：这会解决问题，但有更多内部元素，例如min-height: 50px;，它使用wordlen.append("_")。

调整大小后Bootstrap 3导航栏高度

2 个答案: