Centrage bootstrap groupe de bouton dans un élément

Je suis à essayer de comprendre la meilleure façon de centre de Bootstrap bouton de groupe (c'est à dire, btn-group) au sein d'un élément. Ainsi, par exemple, si vous avez ceci:

<div id='toolbar'>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Command1</button>
        <button type="button" class="btn btn-default">Command2</button>
    </div>
</div>

Comment pourrais-je m'assurer que le btn-group est toujours centré dans toolbar (en supposant qu'il peut s'adapter)? La façon dont je suis venu avec est comme suit: I envelopper un div autour de la btn-group, figure la largeur de la btn-group, puis de définir que la largeur du conteneur avec margin:0 auto. Cependant, il y a deux choses que je n'aime pas à propos de cette approche:

(1) Il nécessite d'essai et d'erreur pour déterminer exactement ce que la largeur de la btn-group est, par définition d'une frontière sur l'emballage et la réduction continue jusqu'à ce que vous trouver la bonne largeur.

(2) Si la largeur de l'évolution des contenus, même par un pixel (par exemple, bouton de modification du texte, ou c'est juste des regards différents sur une machine différente, en raison de leurs paramètres de police, etc.) ensuite, il n'est plus centré et le deuxième bouton descend d'une ligne. Bien sûr, vous pouvez laisser quelques pixels de marge de manœuvre, mais les deux boutons de ne pas être entièrement centré en premier lieu.

Il doit y avoir une meilleure façon. Des idées? Voici mon approche (jsfiddle):

html:

<div id='toolbar'>
    <div class='wrapper'>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Command1</button>
            <button type="button" class="btn btn-default">Command2</button>
        </div>
    </div>
</div>

css:

#toolbar {
    width: 100%;
    max-width: 700px;
    margin: 10px;
    border: 1px solid black;
    padding: 10px;
}

#toolbar .wrapper {
    width: 197px;
    margin: 0 auto;
    /*border: 1px solid blue; used to test width*/
}

OriginalL'auteur EleventyOne | 2014-01-27