Plusieurs menus déroulants dans une entrée de groupe à l'aide de bootstrap 3
Je suis en train de faire une barre de recherche qui devrait ressembler à quelque chose comme ceci:
http://s22.postimg.org/ecaxmtj8x/search_bar.png
Je suis en utilisant bootstrap 3. Dans le code ci-dessous j'ai 3 boutons, où le "menu 2" bouton ouvre un menu déroulant. Je voudrais que le menu "1" sur le bouton pour ouvrir un menu. Mais pour l'instant, mes tentatives ont échoué.
Quand j'essaie de regrouper les boutons dans un btn-group, il se sépare de l'rejoint barre de recherche, ce qui n'est pas ce que je veux. Est-il possible d'avoir 2 menus à l'intérieur d'une div à l'aide de l'entrée-le groupe classe?
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
<button class="btn btn-primary" type="button">
test 1 <span class="caret"></span>
</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
test 2 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</div>
OriginalL'auteur Asgher Qureshi | 2013-09-27
Vous devez vous connecter pour publier un commentaire.
C'est assez facile à faire. Si j'ai employé une petite bidouille pour le faire paraître de bonne qualité (Il peut être fait sans que hack trop je pense ... Pas trop sûr )
jsFiddle Démo : http://jsfiddle.net/niranjan94/dgs25/
HTML:
CSS (par défaut de substitution border-radius pour le faire paraître bon):
(Il y pourrait être d'autres de meilleures façons de le faire aussi)
C'est tout ... 🙂 j'Espère que cela résout votre problème .
OriginalL'auteur niranjan94
J'ai connu le même problème et trouvé une pure bootstrap solution. Éviter toute surcharge css "réparations" en les enveloppant tous les boutons de liste déroulante dans un unique d'entrée-groupe-btn div, puis chaque liste déroulante enveloppez-les dans un btn-group div. À l'aide de plusieurs d'entrée-groupe-btn divs dans une seule entrée-groupe de div casse le style et nécessite css réparations offertes dans une autre solution. Le bootstrap doc conseils de à cette. Voici un exemple simple à démontrer:
OriginalL'auteur scottiejibbs
Bien, pour commencer, vous n'avez pas mis le
data-toggle="dropdown"
pour le bouton detest 1
Le lien vers l'image que vous avez posté ne marche pas, mais vous devez également définir une
div.input-group-btn
pour envelopper cesbutton
etul
.Vous devriez jeter un oeil de plus près à Bootsrap de la documentation.
OriginalL'auteur Giovanni Silveira