響應式導航欄項目

Question

我正在使用Bootstrap 3創建導航欄。我的導航欄在項目和中間的徽標之間有一定的間距。每次放大時，項目和徽標之間的間距都會減小。放大/縮小時如何使間距保持靜止？

100％： 175％：

如果需要的話，這裏是我的CSS + HTML，

.navbar-default { 
    height: 125px; 
    background-color: transparent; 
    border-color: transparent; 
} 

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

.navbar-brand img { 
    height: 95px; 
} 

.navbar-nav li a { 
    line-height: 125px; 
    height: 125px; 
    padding-top: 0; 
    font-weight: 300; 
    text-transform: uppercase; 
} 

.navbar-default .navbar-nav>li>a { 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a { 
    background-color: transparent !IMPORTANT; 
} 

.navbar-default .navbar-nav>li>a:hover { 
    color: #1AC1AD !IMPORTANT; 
} 

    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="#"><img src="assets/img/logo-plain.png"></a> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Portfolio</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

Answer 1

@media (min-width: 768px) { 
    .container { 
     width: 100%; 
    } 
}