Pleine Largeur Split Bouton de la liste Déroulante dans Twitter Bootstrap

J'ai une place sur mon site qui est à l'aide d'un tas de button éléments de style avec btn-block (exemple de le Twitter Bootstrap Docs). Maintenant, je veux passer à certains d'entre eux de diviser les boutons (exemple), mais je n'arrive pas à obtenir la scission boutons et les boutons normaux à être de la même longueur.

J'ai expérimenté toutes sortes de choses, mais je n'arrive pas à trouver une façon de le faire. Quelqu'un a réussi à le faire? Gardez à l'esprit que je ne veux pas coder en dur la largeur des éléments si je n'ai pas. (Notez que cela n'inclut pas l'aide codée en dur pourcentages.) Si c'est absolument nécessaire, je suis OK avec la définition d'une largeur pour la bascule la partie du bouton (parce que je sais il n'y aura qu'une seule flèche de caractère), mais souhaitez spécifier que quelques "nombres magiques" que possible afin de garder le code maintenable à l'avenir.

pouvez-vous reproduire le problème dans un jsfiddle?
Oups, j'ai oublié de le poster celui-là. Ici: jsfiddle.net/eBJGW/4
lien du css et bootstrap
Le Bootstrap CSS est lié à la "gestion des Ressources" onglet sur le côté de la JSFiddle page. C'est le non-modifié le CSS de Twitter Bootstrap site de démonstration.

OriginalL'auteur Moshe Katz | 2013-02-04

  1. 5

    J'ai été à la recherche pour le même genre de comportement et trouvé ce flexbox solution: http://codepen.io/ibanez182/pen/MwZwJp

    C'est une élégante mise en œuvre qui rend l'utilisation de la flex-grow de la propriété.

    Il suffit d'ajouter le .btn-flex classe à la .btn-group dans votre code HTML. C'est tout le CSS que vous avez besoin de: 

    .btn-flex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
}

.btn-flex .btn:first-child {
    flex-grow: 1;
}

    De crédit va à l'auteur de la plume: Nicola Appuyez Sur La Touche I

    Je vais vérifier cela. Flexbox n'était pas encore pris en charge assez largement en 2013, lorsque j'ai d'abord posé la question.

    OriginalL'auteur sldk

  2. 1

    Si vous ajoutez la classe btn-bloc du .btn-élément de groupe et de donner la dropdownbutton éléments % largeurs, que ferait l'affaire.

    .dropdown-lead{
    width: 96%;
    box-sizing: border-box;
}
.dropdown-toggle{
    width: 4%;
    box-sizing: border-box;
}

    Voici un exemple: http://jsfiddle.net/eBJGW/5/

    Cette solution ne fonctionne pas pour moi. Le bouton à bascule doit être d'une taille constante, pas un petit pourcentage lorsque vous faites la fenêtre plus étroite, il obtient des barres de défilement, car la flèche personnage est plus large que l'4% des recettes. Lorsque vous faites la fenêtre plus large, les 4% de la boîte est trop grande. J'ai pu obtenir autour de cette réactive styles, mais je suis vraiment à la recherche d'une solution qui fonctionne sans avoir à fixer la largeur, ou au minimum à fixer la largeur de la bascule et la principale bouton de l'espace.

    OriginalL'auteur belens