[英]Bootstrap brand logo between links
需要此问题的帮助,如何在导航链接之间插入品牌徽标? 以及如何将链接移动到商标徽标附近,例如此图像。 。 而且我需要做出出色的回应。 这是代码。
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">Logo</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</nav>
也许这就是您想要的。
<nav class="navbar navbar-default" role="navigation">
<div class="navbar navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<div class="navbar-brand navbar-brand-centered">Logo</div>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</div>
</nav>
更改引导CSS:
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-inner {
text-align:center;
}
谢谢https://jsfiddle.net/phg350de/4/
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">Logo</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<div class="row">
<div class="col-xs-0 col-sm-3 col-md-3">
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="col-xs-0 col-sm-3 col-md-3">
</div>
</div>
</div>
</div>
</nav>
CSS:
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 180px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.