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
Vous devez vous connecter pour publier un commentaire.
Suffit d'utiliser
.text-center
sur le conteneur depuis.btn-group
est inline block: violonMeilleure réponse ici.
OriginalL'auteur Adrift
Depuis le bouton groupe utilise
display: inline-block
, la façon correcte de le centre seraithttp://jsfiddle.net/mblase75/USqQn/
(Vous pouvez également appliquer le style à
#toolbar
et retirer lediv.wrapper
entièrement -- selon que vous avez autre chose à l'intérieur de la barre d'outils. http://jsfiddle.net/mblase75/USqQn/1/)OriginalL'auteur Blazemonger