Responsive Navbar Items

Question

Ich verwende Bootstrap 3, um eine Navbar zu erstellen. Meine Navbar hat einen gewissen Abstand zwischen den Elementen und dem Logo in der Mitte. Jedes Mal, wenn ich heranzoomen, verringert sich der Abstand zwischen den Elementen und dem Logo. Wie kann ich den Abstand beim Ein- und Auszoomen statisch machen?

100%: 175%:

Wenn nötig, hier ist mein 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%; 
    } 
}