Центрирование группы кнопок бутстрапа в элементе

Я пытаюсь найти лучший способ центрировать группу кнопок Bootstrap (т. Е. btn-group) внутри элемента. Так, например, если у вас есть это:Центрирование группы кнопок бутстрапа в элементе

<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>

Как я мог бы гарантировать, что btn-group всегда в центре в toolbar (предполагая, что он может поместиться)? То, как я придумал, выглядит следующим образом: я обертываю div вокруг btn-group, вычислим ширину этого btn-group, а затем установите эту ширину на обертке вместе с margin:0 auto. Тем не менее, есть две вещи, которые мне не нравятся в этом подходе:

(1) Требуется пробная версия и ошибка, чтобы выяснить, что такое ширина btn-group, путем установки границы на обертке и постоянного ее уменьшения пока не найдете нужную ширину.

(2) Если ширина содержимого изменяется даже с помощью пикселя (например, текст кнопки изменяется, или он просто выглядит по-другому на другой машине из-за их настроек шрифта и т. Д.), То он больше не центрирован, и вторая кнопка опускает линию. Конечно, вы можете оставить здесь несколько пикселей, но тогда две кнопки фактически не будут полностью центрированы в первую очередь.

Должен быть лучший способ. Есть идеи? Вот мой подход (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*/ 
}

источник

2014-01-27 EleventyOne

Просто используйте .text-center на контейнере, так как .btn-group инлайн блок: fiddle

<div id='toolbar'> 
    <div class='wrapper text-center'> 
     <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>

источник

2014-01-27 22:26:13 Adrift

Возможно, это более «способ загрузки». Конечно, это по сути то же самое решение. – Blazemonger

Лучший ответ прямо здесь. – shinzou

Поскольку кнопка группа использует display: inline-block, правильный путь к центру им будет

#toolbar .wrapper { 
    text-align: center; 
}

http://jsfiddle.net/mblase75/USqQn/

(Вы можете также применить стиль #toolbar и удалить div.wrapper полностью - в зависимости от того, есть что-то еще внутри панели инструментов. http://jsfiddle.net/mblase75/USqQn/1/)

источник

2014-01-27 22:27:32 Blazemonger

Центрирование группы кнопок бутстрапа в элементе

ответ

Смежные вопросы