Comment créer un groupe de boutons avec un bouton ayant menu déroulant?

Comment créer un groupe de boutons avec un bouton ayant menu déroulant? Je demande parce que dans cette situation, le menu s'affiche pas sous/ci-dessous le bouton à gauche de la bordure de page. Si je supprime le groupe-classe button(class="btn-group") (j'ai la version autonome de bouton) de la liste déroulante s'affiche correctement? Est-il un moyen de savoir comment gérer cela?

Voici le lien pour le groupe de boutons de la page de manuel juste pour faire référence à ce que je veux dire.
http://twitter.github.com/bootstrap/components.html#buttonGroups

Pourquoi voulez-vous un buttongroup avec un seul bouton?
Il y a plus de boutons, mais un seul est avec menu déroulant ...
Ah, ok. Pourriez-vous ajouter un peu de code à votre question? Je l'ai juste essayé rapide et sale dans mon projet "bootstrap" et il fonctionne très bien.
avez-vous jamais résoudre ce problème? Je vois le même effet, mais aucun montant de la lecture ou la réorganisation de balisage semble pour le résoudre?

OriginalL'auteur David Marko | 2012-03-08

twitter-bootstrap

BOOTSTRAP 4:

Imbriquée Des Groupes De Boutons

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

BOOTSTRAP 3:

La bonne réponse pour bootstrap 3.0 est ici:

Imbriquée Des Groupes De Boutons

Pas besoin de changer de CSS:

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Yep, c'est la bonne réponse pour la 3.0, juste envelopper de votre déroulant dans un enfant btn-group.
a travaillé comme un charme.. +1
Ne fonctionne pas dans la version 4.
ajout d'un bootstrap 4 section et remplacé bootstrap 3 lien cassé

OriginalL'auteur tommasop

J'ai ajouter un "groupe-liste" classe "btn-group" div habillage de mon bouton de la liste déroulante.
De cette façon, la liste déroulante "dropdown-toggle" peut être remplacé par le CSS personnalisé.

Position dans le groupe est géré par :premier enfant et :dernier enfant

Voici le hack : http://jsfiddle.net/Dk7sw/6/ (MOINS de CODE disponible aussi au CSS en bas)

CSS :

/*
Twitter Bootstrap CSS modifications for having dropdown menus in
buttons groups.
Dropdowns menus are well positionned, under their buttons.
LESS code at bottom
Kure2012.
*/
.btn-group.group-dropdown {
margin: 0px;
padding: 0px;
margin-left: -1px;
}
.btn-group.group-dropdown .dropdown-toggle {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group.group-dropdown:first-child {
margin: 0px;
padding: 0px;
margin-right: -1px;
}
.btn-group.group-dropdown:first-child .dropdown-toggle {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group.group-dropdown:first-child .dropdown-toggle.btn-large {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group.group-dropdown:last-child {
margin: 0px;
padding: 0px;
margin-left: -1px;
}
.btn-group.group-dropdown:last-child .dropdown-toggle {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group.group-dropdown:last-child .dropdown-toggle.btn-large {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
/* And the LESS Code :
.btn-group{
&.group-dropdown{
margin:0px;
padding:0px;
margin-left:-1px;
.dropdown-toggle{
.border-radius(0);
}
&:first-child{
margin:0px;
padding:0px;
margin-right:-1px;
.dropdown-toggle{
.border-top-left-radius(4px);
.border-bottom-left-radius(4px);
&.btn-large{
.border-top-left-radius(6px);
.border-bottom-left-radius(6px);
}
}                
}
&:last-child{
margin:0px;
padding:0px;
margin-left:-1px;
.dropdown-toggle{
.border-top-right-radius(4px);
.border-bottom-right-radius(4px);
&.btn-large{
.border-top-right-radius(6px);
.border-bottom-right-radius(6px);
}
}
}
}    
}

Et HTML :

<!--
Custom HTML : add a "group-dropdown" class to the dropdown
"btn-group" div.
The "btn-group" div must wrap the whole button (button+submenu items), as specified in the bootstrap doc. This allows you to put several dropdowns in the same buttons group.
Works whatever their position in the button group is.
-->
<!---
Here starts the button group
-->
<div class="btn-group">
<!--First dropdown : note the "group-dropdown" property -->
<div class="btn-group group-dropdown">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Filter by">
<i class="icon icon-filter"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">All</a></li>
<li><a href="#">...</a></li>
</ul>
</div>
<!-- Classic button -->
<a href="#" class="btn btn-mini" title="New">
<i class="icon-plus-sign"></i>
</a>
<!-- Classic button -->
<a href="#" class="btn btn-mini" title="Import">
<i class="icon-upload"></i>
</a>
<!-- Dropdown in the middle of the button group -->
<div class="btn-group group-dropdown">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Export">
<i class="icon icon-download"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">.csv file</a></li>
<li><a href="#">.json file</a></li>
<li><a href="#">.ods file</a></li>
<li><a href="#">.xml file</a></li>
<li><a href="#">.sql file</a></li>
</ul>
</div>
<!-- Dropdown at the end of the button group -->
<div class="btn-group group-dropdown">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Another action">
<i class="icon icon-home"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Custom menu</a></li>
<li><a href="#">Custom menu</a></li>
<li><a href="#">Custom menu</a></li>
</ul>
</div>
</div>

OriginalL'auteur Kure

4

Ajouter, après bootstrap.css:
```
.btn-group > .dropdown-toggle {
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
margin-right: -1px;
}
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle:nth-last-child(2) {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px; }
```
http://jsfiddle.net/TpYfc/17

Vous pouvez ajouter un 1px marge négative de la dropdown-toggle, sinon vous avez une double frontière entre les boutons: jsfiddle.net/TpYfc/17
vous avez raison, je l'ai raté. Merci de me laisser savoir
Ce est assez bon. Serait bien si à l'activation de plusieurs listes déroulantes dans 1 groupe.

OriginalL'auteur baptme

C'était le code à partir du lien ci-dessus:

<style>
.btn-custom-toolbar > .btn-group {
margin-left: 0px;
margin-right: 0px;
}
.btn-custom-toolbar > .btn-group > .btn, .btn-custom-toolbar > .btn-group >             .dropdown-toggle
{
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius: 0px;
margin-left: -1px;
}
.btn-custom-toolbar > .btn-group:first-child > .btn:first-child {
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px; 
}
.btn-custom-toolbar > .btn-group:last-child > .btn {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px; 
}
</style>
<body style="padding: 30px;"
<h1>Version with sub btns</h1>
<div class="btn-toolbar btn-custom-toolbar">
<div class="btn-group">
<button class="btn btn-cust-first">Dropdown 1</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li><li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn">Button 1</button>
</div>
<div class="btn-group">
<button class="btn">Dropdown 1</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li><li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn">Dropdown 3</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown 3
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>

OriginalL'auteur FishWave

4 lignes solution a été la plus propre à moi :

.btn-group > *:not(:first-child),
.btn-group > *:not(:first-child) .btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}

OriginalL'auteur bviale

Vous devez vous connecter pour publier un commentaire.