我正在尝试向标准引导程序下拉菜单添加图标。 左边的图标很好,但我添加了辅助图标,我希望这些图标浮动:右边并以单行对齐。
目标:我希望辅助图标在右侧对齐,而主要图标在左侧
以下是我添加辅助图标的方法,类“sec”
<li>
<a href="#"><i class="fa fa-save"></i>
SomeText
<i class="sec fa fa-user"></i>
</a>
</li>
的jsfiddle: http://jsfiddle.net/bababalcksheep/ydmnf0wt/6/
HTML:
<div class="row">
<div id="test" class="col-md-4">
<div class="btn-group">
<button data-toggle="dropdown" type="button" class="btn blue dropdown-toggle">
Dropdown <i class="fa fa-angle-down"></i>
</button>
<ul role="menu" class="dropdown-menu">
<li>
<a href="#"><i class="fa fa-save"></i>Action ActionActionActio
<i class="sec fa fa-user"></i>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#"><i class="fa fa-save"></i>View
<i class="sec fa fa-user"></i>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#"><i class="fa fa-save"></i>Custom view 2
<i class="sec fa fa-user"></i>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#"><i class="fa fa-save"></i>Custom view 21
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Custom view 43
</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.dropdown-menu > li > a > i {
margin-right: 5px;
}
.dropdown-menu i.sec
{
display: inline-block;
font-size: 14px;
font-weight: 300;
height: auto;
}
答案 0 :(得分:1)
您应该像这样修改CSS:
body {
background-color : white !important;
}
@import url(netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css);
.dropdown-menu{
width:250px;
}
.dropdown-menu > li > a {
margin-right: 5px;
height:30px;
}
.dropdown-menu > li > a > i {
margin-right: 5px;
}
.dropdown-menu > li > a > i.sec
{
display: inline-block;
font-size: 14px;
font-weight: 300;
height: auto;
float:right;
}
.dropdown-menu > li > a > i.first
{
display: inline-block;
font-size: 14px;
font-weight: 300;
height: auto;
float:left;
}
.dropdown-menu > li > a > .text
{
float:left;
display: inline-block;
}
还修改每个菜单,如下所示:
<li>
<a href="#">
<i class="first fa fa-save"></i>
<span class="text">Action ActionActionActio</span>
<i class="sec fa fa-user"></i>
</a>
</li>
的 Check This JSFiddle. 强>