我正在尝试创建一个带徽标的导航栏,例如此布局:Layout on desktop
并使用移动设备,例如此布局:Layout on mobile
在第一个布局中,我需要导航栏垂直居中。我写了这段代码:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Search</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</div>
</div>
这个工作,除了垂直居中的导航栏和移动设备上的徽标在导航栏下,我怎么能获得这两个布局?提前致谢。 :)
答案 0 :(得分:0)
您可以尝试align="center"
:
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Search</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</div>
请告诉我它是否有效。
答案 1 :(得分:0)
您的图片似乎没有让您不清楚自己想要实现的目标。据我所知,你在移动设备上的空间不足导致元素堆叠。尝试为徽标添加调整大小属性,使其成为移动设备的兼容尺寸。请修改你的问题。