web-dev-qa-db-ja.com

Bootstrapドロップダウンにアイコンを追加する

Bootstrapドロップダウンのリンクに、次のようなコードを使用して、いくつかのアイコンを追加したい：

<ul>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><i class="icon-arrow-up"></i><a href="#">Up</a></li>
            <li><i class="icon-arrow-down"></i><a href="#">Down</a></li>
            <li><i class="icon-arrow-left"></i><a href="#">Left</a></li>
            <li><i class="icon-arrow-right"></i><a href="#">Right</a></li>
        </ul>
    </li>
</ul>

ただし、アイコンは適切ではありません。

dropdown issue

この回答 でソリューションを使用してみましたが、うまくいかないようです。誰かが解決策を提供し、それがなぜ/どのように機能するかを説明できますか？

デモ

ありがとう！

htmlcsstwitter-bootstrapdrop-down-menuicons
35
wrongusername

アンカータグ内にアイコンを配置します。

<ul>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-arrow-up"></i> Up</a></li>
            <li><a href="#"><i class="icon-arrow-down"></i> Down</a></li>
            <li><a href="#"><i class="icon-arrow-left"></i> Left</a></li>
            <li><a href="#"><i class="icon-arrow-right"></i> Right</a></li>
        </ul>
    </li>
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
63
N1ck

Positionに使用

あなたの定義.dropdown-menu liposition relativeand私はposition absolute

このように

.dropdown-menu a {
    white-space:normal;
}
.dropdown-menu > li{position:relative;}

.dropdown-menu > li > i{position:absolute;left:0;top:3px;}

ライブデモ

13
Rohit Azad

Bootstrap v3（ http://www.FontAwesome.com ）のアイコンを使用）のアンカータグ内にアイコンを配置します。

        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">A Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-arrow-up"></i> Up</a></li>
                    <li><a href="#"><i class="fa fa-arrow-down"></i> Down</a></li>
                    <li><a href="#"><i class="fa fa-arrow-left"></i> Left</a></li>
                    <li><a href="#"><i class="fa fa-arrow-right"></i> Right</a></li>
                </ul>
            </li>
        </ul>

例： http://jsfiddle.net/9ce3P/

5
Zymotik
<ul class="dropdown-menu" role="menu">
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="javascript:void(0)">
            <span class="pull-right">Edit</span>
            <span class="glyphicon glyphicon-edit pull-left"></span>
            <span class="clearfix"></span>
        </a>
    </li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="javascript:void(0)">
            <span class="pull-right">Delete</span>
            <span class="glyphicon glyphicon-remove pull-left"></span>
            <span class="clearfix"></span>
        </a>
    </li>
</ul>
0
Mohammad Dayyan