品牌在中間的Bootstrap Navbar

Question

我知道這個話題有幾個問題，我也跟着一些例子，以達到我現在的地步。

問題是，它不是真的如我所願。

讓我更好地解釋它：

基本上，我要的是一個居中標誌一個導航欄，但菜單項中間對齊以及（所以我認爲navbar-left和navbar-right是不是最好的選擇，因爲菜單條目左右移動太遠）。

目前，我好不容易纔擁有的一切中心（http://codepen.io/nickimola/pen/MyWKrM）：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <a class="navbar-brand" href="#"><img src="http://www.sdsi.pti.org.pl/var/ezwebin_site/storage/images/media/images/fujitsu-logo/7830-1-pol-PL/Fujitsu-logo_imagelarge.jpg" /></a> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
</nav> 

，我不知道現在是我該如何使含中間菜單項（一修改它的東西品牌）根據圖像的寬度改變寬度。

我嘗試添加一個寬度圖像像這樣（http://codepen.io/nickimola/pen/oxNbdB）：

.navbar-brand img { 
    display: inline; 
    max-height: 100%; 
    width:120px; 
} 

但顯然結果不是我所期待的。

除了這個尺寸問題，其他一切都按我想要的方式工作。 我需要一些幫助，因爲這是我第一次使用bootstrap，我對它的工作原理還不是很熟悉。

感謝

編輯

後的一些工作，我設法在我想要的一點是幾乎：http://codepen.io/nickimola/pen/XdWdWK?editors=1100

我還需要能夠垂直對齊的菜單項和標誌然後它應該準備好。

Answer 1

我想你會需要一些JavaScript它。如下所示查看jQuery解決方案。

http://codepen.io/anon/pen/ZWEWaB

$(window).on('resize', function() { 
 
    if (window.innerWidth < 768) { 
 
    if ($('#logo').length != 0) { 
 
     $('.navbar-brand').unwrap('<li id="logo"></li>'); 
 
     $('.navbar-brand').insertAfter('.navbar-toggle'); 
 
    } 
 
    } else { 
 
    if ($('#logo').length == 0) { 
 
     $('.navbar-brand').wrap('<li id="logo"></li>'); 
 
     $('#logo').insertAfter('.navbar-nav li:nth-child(2)'); 
 
    } 
 
    } 
 
}).resize();

.navbar .navbar-brand img { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar .navbar-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
    .navbar .navbar-nav li { 
 
    float: none; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    } 
 
}

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
     <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="https://i.imgur.com/9kJixwN.png"></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 2

徽標不會推導向導項目的原因是因爲您已將其定位到絕對位置，因此它不在文檔流中。你可以做的是在導航項中使用n-child來給它一些空間。我在這裏分叉您codepen：http://codepen.io/anon/pen/QNWyYP並添加這些樣式：

ul.nav.navbar-nav > li:nth-child(2) { 
    margin-right: 40px; 
} 
ul.nav.navbar-nav > li:nth-child(3) { 
    margin-left: 40px; 
}