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