响应式Navbar项目

Question

我使用Bootstrap 3创建一个Navbar。我的Navbar在项目和中间的徽标之间有一定的间距。每次放大时，项目和徽标之间的间距都会减小。放大/缩小时如何使间距保持静止？

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%;
    }
}