我想使用Bootstrap 3创建一个NavBar,如下所示:
我当前导航栏的代码如下:
<div class="container">
<div class="nav-color">
<div class="nav-wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</span></a></li>
<li class=""><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</a></li>
<li class="logo hidden-xs"><a href="#"><img alt="Insert Image Logo" src=""></a></li>
<li class=""><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</span></a></li>
<li class=""><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</span></a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
我不知道如何在不推动整个部分的情况下围绕徽标品牌的底部,而在其间留下一个空白区域。
答案 0 :(得分:1)
只添加一些css,点击运行并查看完整页面以查看这是否是您想要的,如果是,您还需要覆盖菜单悬停的样式
.logo {
width: 120px;
height: 50px;
}
.logo a {
height: 90px;
background: yellow;
border-radius: 0 0 40px 40px;
}
.logo img {
background: green;
width: 60px;
height: 60px;
margin: 0 15px;
border-radius: 100%;
display: block;
}
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="nav-color">
<div class="nav-wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</span></a></li>
<li class=""><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</a></li>
<li class="logo hidden-xs">
<a href="#"><img alt="Insert Image Logo" src=""></a>
</li>
<li class=""><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</span></a></li>
<li class=""><a href="#"><span class="hidden-xs"></span><span class="text">Insert Image</span></a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
&#13;