0
導航欄包含菜單選項之間的品牌圖像。在響應模式下,調整菜單選項的大小會出現在圖片徽標上方。Bootstrap導航欄 - 徽標上方的選項菜單
我認爲一個選項將是將其轉換爲切換導航欄。有沒有其他的選擇?
代碼:
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar9">
<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="brand-centered">
<a class="navbar-brand" href="index.html"><img style="margin-right: 10px; padding: 0;" src="https://www.w3schools.com/images/w3schools_green.jpg"/></a>
</div>
<div id="navbar9" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">MENU OPTION EXAMPLE</a></li>
<li><a href="#">MENU OPTION EXAMPLE</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">MENU OPTION EXAMPLE</a></li>
<li><a href="#">MENU OPTION EXAMPLE</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
的CSS:
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: auto;
padding: 0px;
width: 60px;
}
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.brand-centered .navbar-brand {
display: flex;
align-items: center;
}
.navbar-toggle {
z-index: 1;
}
https://jsfiddle.net/dcodesys/5zLt9e5b/
不能上的jsfiddle對不起復制,它的正常工作有。 –
另一種選擇可能是使用兩個不同的導航欄。你可以使用這些類:(hidden-xs,visible-xs) –
@Elie Nassif我已更新鏈接,對不起! – rumar