css:bootstrap下拉菜单右对齐图标

时间:2014-08-09 13:53:17

标签: html css twitter-bootstrap-3

我正在尝试向标准引导程序下拉菜单添加图标。 左边的图标很好,但我添加了辅助图标,我希望这些图标浮动:右边并以单行对齐。

目标:我希望辅助图标在右侧对齐,而主要图标在左侧

以下是我添加辅助图标的方法,类“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;
}

1 个答案:

答案 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.