web-dev-qa-db-fra.com

twitter bootstrap issue: Alignez à droite le curseur dans l'en-tête de la liste déroulante

J'ai un problème avec le bon alignement du curseur. L'utilisation de .pull-right dans la plage le fait aller dans le coin supérieur droit.

Comment puis-je le faire à nouveau centré verticalement? Je voudrais également aligner le texte à gauche

http://www.bootply.com/r8x7g5Bw5R

                    <div class="btn-group cust-dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">test</a></li>
                        <li><a href="#">tes2</a></li>
                        <li><a href="#">test3</a></li>
                    </ul>
                </div>

et le CSS

.cust-dropdown {
width: 200px;}
drop-down-menutwitter-bootstrap-3caret
21
Franckl
.caret {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    left: 90%;
    top: 45%;
    position: absolute;
}

En utilisant la position absolue et un pourcentage en haut et à gauche, j'ai pu aligner mon curseur à droite dans la liste déroulante. Fonctionne dans Chrome, IE et FF.

MODIFIER

Le code précédent fonctionnera mais modifie le style du curseur. Si vous voulez simplement le repositionner en conservant son style, étendez simplement la classe .caret de Bootstrap:

.caret {
    position: absolute;
    left: 90%;
    top: 45%;
}
26
FiveTools

Une solution beaucoup plus simple existe pour ce problème. Ce style devrait avoir l'air le plus naturel et être le plus réactif à tous les usages car il ne dépend d'aucune disposition prédéterminée (autre que les styles par défaut bootstrap).

.dropdown > .btn > .caret {
  float: right;
  margin: 6px 0;
  // if you are using Less, the you can reuse the actual vertical padding
  // margin: @padding-base-vertical 0;
}
12
pjs