Html 如何正确对齐bootstrap 3导航栏
也许这看起来很简单,但对我来说却成了一个问题: 我需要徽标和所有的Html 如何正确对齐bootstrap 3导航栏,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,也许这看起来很简单,但对我来说却成了一个问题: 我需要徽标和所有的li a元素与底部对齐,并在一行、填充、边距上对齐 <!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <but
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>
切换导航
。导航栏品牌
在导航栏内为100%高度,但是它被填充,以便任何文本都是中间对齐的。当我需要将图像粘贴到该元素或任何其他导航栏元素中时,我会使用CSS背景图像
,如下所示:
.navbar-brand {
width: 170px; /* Your image width */
background: url(../img/logo.png) center bottom no-repeat;
}
这样可以很好地控制图像位置