7

アイコンが追加されていることがわかるように、ブートストラップ ドロップダウン メニューにいくつかのアイコンを追加しようとしています (以下のフィドルを参照)。

これを行う適切な方法は何ですか?

ここに画像の説明を入力

jsフィドル

<div class="pull-left">
<div class="pull-right">
    <div class="btn-group">                 
            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                <span>Actions</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-ok"></i>Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li class="divider"></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </div>
</div>

4

2 に答える 2

17

Bootstrap 3.xでこれを行った方法は次のとおりです。

アイコン付きメニュー

マークアップ:

<ul class="dropdown-menu">
  <li><a href="#" class="icon"><span
         class="glyphicon glyphicon-user"></span>User Profile</a></li>
  <li><a href="#">Log Out</a></li>
</ul>

CSS:

.dropdown-menu a.icon {
  position: relative;
  padding-left: 40px;
}
.dropdown-menu a.icon .glyphicon {
  top: 6px;
  left: 10px;
  font-size: 18px;
}

重要なのは、グリフィコンが絶対配置されていることです。グリフィコンはマークアップ内に「含まれ」てい<a>ますが、デフォルトではメニュー全体に対して相対的に配置されます。アイコンを含む各メニュー アンカーにクラスを追加すること.iconで、そのアンカーに相対的な位置を設定し、アンカー テキストをパディングして、アイコンが適切に表示されるようにすることができます。.icon上記のように、クラスまたはグリフィコンを含まないメニュー項目は、通常、テキスト リンクとして表示されます。

元の質問の意図が、テキストを常にアイコンを垂直に揃えることであるかどうかにかかわらず、パディングを に移動するだけ.dropdown-menu aです。

于 2014-04-22T18:21:30.720 に答える
0

これは機能します。!important残念ながら、通常は回避するのが最善の background-image で使用する必要があるようです。nth-of-type は一部の古いブラウザーではサポートされていないことに注意してください。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

/* First Menu Item */
.dropdown-menu li:nth-of-type(1) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

/* Second Menu Item */
.dropdown-menu li:nth-of-type(2) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

JS フィドル: http://jsfiddle.net/syVk8/

編集:わかりました、少し明確にした後、テキストをまったくシフトしたくないことがわかりました。左側にパディングがない同様の例と、さまざまなメニュー項目に適用してチェックボックス (またはアイコンが何であれ) を追加できる「ok」というクラスがあります。

li.ok { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
}

JS フィドル: http://jsfiddle.net/syVk8/2/

于 2013-05-14T23:07:34.853 に答える