Ajout d'icônes pour un Bootstrap déroulante

Je tiens à ajouter quelques icônes pour les liens dans un fichier d'amorce la liste déroulante à l'aide de code comme ceci:

<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>

Cependant, les icônes sont hors de place:

J'ai essayé en utilisant la solution dans cette réponse, mais il ne semble pas fonctionner. Quelqu'un peut-il apporter une solution et d'expliquer pourquoi/comment ça marche?

Démo

Merci!

InformationsquelleAutor wrongusername | 2013-04-11

Mettre les icônes à l'intérieur de l'ancre tags:

HTML:

<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"/>

Twitter bootstrap spécifiquement utilisé la je balise car c'est un élément inline. De cette façon, vous pouvez l'utiliser à l'intérieur <p> et <a> balises et c'est toujours sémantiquement correct. C'est la méthode que j'avais utiliser pour vous.
mais pourquoi ne pas travailler de cette façon(firefox): jsfiddle.net/ywkLt/40 ? Des indices comment résoudre ce problème? Merci
il peut être syntaxiquement correct, mais je ne pense pas que l'aide j'ai des icônes est sémantiquement correcte 🙂
Je recommande d'ajouter le code css suivant à votre site afin que les icônes sont alignés à peu près la même. Si vous avez de masquage et de superposition, il ne fonctionnera pas aussi bien. .dropdown-item i { min-width: 20px; text-align: center; }

InformationsquelleAutor N1ck

12

Utilisé pour Position

Définir votre .dropdown-menu li position relative et je définir position absolute

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

.dropdown-menu > li > i{position:absolute;left:0;top:3px;}
```
Démonstration En Direct
- Avec cette méthode, en cliquant sur l'icône de ne pas avoir le même effet que de cliquer sur les liens.
- certains d'entre nous veulent ce genre de comportement.
InformationsquelleAutor Rohit Azad

Mettre les icônes à l'intérieur de l'ancrage des balises pour Bootstrap v3 (avec des icônes de 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>

Exemple: http://jsfiddle.net/9ce3P/

InformationsquelleAutor 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>

InformationsquelleAutor Mohammad Dayyan

Vous devez vous connecter pour publier un commentaire.