也许它看起来很简单但对我来说却成了一个问题:
我需要 Logo 和所有 li a
元素与底部对齐并在一行、填充、边距上?
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".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 class="navbar-brand" href="#">
<img class="logo" alt=" logo" src="Logo.png" height="35" width="50" >
<span class="logo-text">logo text</span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
最佳答案
.navbar-brand
在导航栏中是 100% 的高度,但是它被填充以便任何文本都居中对齐。当我需要在该元素或任何其他导航栏元素中粘贴图像时,我使用 CSS background-image
,如下所示:
.navbar-brand {
width: 170px; /* Your image width */
background: url(../img/logo.png) center bottom no-repeat;
}
这使您可以很好地控制图像位置。
关于html - 如何垂直对齐 bootstrap 3 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26652834/