与品牌的响应式引导程序导航

Question

我在保持导航栏响应时遇到问题。当浏览器达到一定的尺寸时，高度会增加。我做了一个小提琴来展示发生了什么，如果你展开预览，那么导航栏将是正常的。

http://jsfiddle.net/x70r23cn/

.navbar { 
    background-color: #204489; 
    box-shadow: 0 4px 8px rgba(0,0,0,.25); 
    float: center; 
    } 
    .navbar a { 
    color: #fff; 
    } 

    .navbar-brand img { 
    margin-left: auto; 
    margin-right: auto; 
    height: 25px; 
    } 
    .navbar-brand { 
     margin-left: auto !important; 
     margin-right: auto !important; 
     display: block !important; 
     float: none !important; 
    } 

    <nav class='navbar navbar-fixed-top'> 
    <div class='container'> 
     <div class='navbar-header'> 
     <button aria-controls='navbar' aria-expanded='false' class='navbar-toggle collapsed' data-target='#navbar' data-toggle='collapse' type='button'> 
      <span class='sr-only'>Toggle navigation</span> 
      <span class='icon-bar'></span> 
      <span class='icon-bar'></span> 
      <span class='icon-bar'></span> 
     </button> 
     </div> 
     <div class='navbar-brand'> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" /> 
     </div> 
    </div> 
    </nav> 

Answer 1

取出navbar-header类，因为它的设计，使移动设备上的崩溃菜单;这就是导航栏不断扩大的原因。

查看示例代码段。

.navbar.navbar-custom { 
 
    background-color: #204489; 
 
    box-shadow: 0 4px 8px rgba(0, 0, 0, .25); 
 
    float: center; 
 
} 
 
.navbar.navbar-custom a { 
 
    color: #fff; 
 
} 
 
.navbar.navbar-custom .navbar-brand { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    float: none; 
 
} 
 
.navbar.navbar-custom .navbar-brand img { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 25px; 
 
    margin-top: -2px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class='navbar navbar-custom navbar-fixed-top'> 
 
    <div class='container'> 
 
    <div class='navbar-brand'> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" /> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

试试这个...的navbar-brand需求是在navbar-header和navbar-brand需求是inline或inline-block。

.navbar { 
 
    background-color: #204489; 
 
    box-shadow: 0 4px 8px rgba(0,0,0,.25); 
 
    float: center; 
 
} 
 
.navbar a { 
 
    color: #fff; 
 
} 
 

 
.navbar-brand img { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 25px; 
 
} 
 
.navbar-brand { 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
     display: block !important; 
 
     float: none !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"> 
 
       <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 src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" /> 
 
      </a> 
 
     </div> 
 
    </div> 
 
<nav>