Html 将导航栏图标与引导3中的文本对齐?
我使用的是bootstrap3。这是我的html: 如您所见,Html 将导航栏图标与引导3中的文本对齐?,html,css,twitter-bootstrap-3,navbar,Html,Css,Twitter Bootstrap 3,Navbar,我使用的是bootstrap3。这是我的html: 如您所见,星形和书签文本与其他导航条不一致。 如何解决这个问题? 这是我的密码 <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="bu
星形
和书签
文本与其他导航条不一致。
如何解决这个问题?
这是我的密码
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/mybookmarks/">
<span class="glyphicon glyphicon-star" id="starry"></span>
BookMarks
</a>
</li>
<li>
<a href="/search/create/">
<span class="glyphicon glyphicon-plus"></span>
New Search
</a>
</li>
<li>
<a href="/dashboard/">
<span class="glyphicon glyphicon-th"></span>
Searches
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-stats"></span>
Reports <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="implement this">Raw Data</a>
</li>
<li>
<a href="implement this">Graphs</a>
</li>
<li class="divider"></li>
<li>
<a href="implement this">Email Report</a>
</li>
</ul>
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
demo <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/accounts/settings/">Account Settings</a>
</li>
<li>
<a href="/accounts/password/change/">Change Password</a>
</li>
<li class="divider"></li>
<li>
<a href="help">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="/logout/">Log Out</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse --> </div>
<!-- /.container --> </nav>
该问题是由该图标的字体大小增加引起的 解决这一问题的一种方法是:
#starry {
color: #B939A0;
font-size: 20px;
float: left;
margin: -2px 3px 0 0;
}
浮动将其从文档流中取出,从而允许文本重新对齐。然后,边距将重新定位图标
太棒了。您如何获得诸如-2px 3px之类的边距值?
#starry {
color: #B939A0;
font-size: 20px;
float: left;
margin: -2px 3px 0 0;
}