Как центрировать .btn-группу из twitter-bootstrap?

71

Я использую twitter-bootstrap, и мне было довольно сложно центрировать div, у которого есть класс .btn-group (ссылка). Обычно я использую

margin: 0 auto;

или

text-align: center;

чтобы центрировать материал в div, но он не работает, когда внутренний элемент имеет свойство float: left, которое в этом случае используется для визуальных эффектов.

http://jsfiddle.net/EVmwe/1

Теги:

12 ответов

70
Лучший ответ

Отредактировано: Это изменилось с Bootstrap 3. См. решение для Bootstrap 3 ниже.

Извлекает ли div из вопроса?

Посмотрите на этот пример: http://jsfiddle.net/EVmwe/4/

Важная часть кода:

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

Обертка группы кнопок в пределах деления и установка div в центр выравнивания текста. Группа кнопок также должна быть перезаписана для отображения встроенного блока и унаследованной ширины.

Переписывание отображения привязок в встроенный блок и float: none, также вероятно работало бы, как сказал @Andres Ilich.

Обновление для Bootstrap 3

Как и в Bootstrap 3, у вас есть классы выравнивания (как показано в документации). Теперь вам просто нужно добавить класс text-center к родительскому. Например:

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
</div>

См. рабочий пример здесь: http://jsfiddle.net/EVmwe/409/

Поделиться
  • 1
    У bootstrap теперь есть классы выравнивания, которые избавляют вас от необходимости создавать класс btn-group-wrap: text-left, text-center и text-right. См. Классы выравнивания в разделе «Типография» getbootstrap.com/css/#type
71

Это работает для меня (Bootstrap 3):

<div class="text-center">
   <div class="btn-group">
      <a href=1 class="btn btn-small">1</a>
      <a href=1 class="btn btn-small">2</a>
      <a href=1 class="btn btn-small">3</a>
   </div>
</div>
Поделиться
  • 0
    самое простое решение, большое спасибо
14

или добавьте "центрирование с разбивкой на страницы", например:

<div class="btn-toolbar pagination-centered">
  <div class="btn-group">
    <a href=1 class="btn btn-small">1</a>
    <a href=1 class="btn btn-small">2</a>
    <a href=1 class="btn btn-small">3</a>
  </div>
</div>
Поделиться
  • 2
    Определенно чище, чем принятый ответ. Переписывание классов не требуется.
  • 0
    Я считаю, что btn-toolbar здесь не нужен, если он кого-то смущает.
Показать ещё 1 комментарий
6

для начальной загрузки 4

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>
Поделиться
6

С Twitter Bootstrap 3 нет необходимости в каком-либо обходном пути. Просто укажите text-align: center для родительского элемента.

Поделиться
6

Просто объявляйте ссылки на кнопки inline-block вместо float:left, и ваше объявление text-align:center будет работать так:

.btn-group a {
    display:inline-block;
}

Демо: http://jsfiddle.net/EVmwe/3/

Поделиться
4

Если кто-то хочет изменить ширину .btn-group, вы можете сделать min-width, а не ширину. Я сделал это:

HTML:

<div class="text-center">
<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
</div>
</div>

CSS

.btn-group {min-width: 90%;}
.btn {width: 50%;}

Установите ширину группы btn 90% текстового центра, и каждая включенная кнопка составляет 50% от группы кнопок (45% от текстового центра).

Поделиться
1

Я использую следующее решение. 

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>
Поделиться
0 
<div class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>
Поделиться
0

Это помогло мне в Bootstrap v3.3

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
Поделиться
0

Бросьте btn-группу в тег p и используйте text-align: center style для p {}

    p {
    text-align: center;
    }

    <p>
    <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
    </div>
    </p>
Поделиться
0

В Bootstrap 3 вам просто нужно создать структуру так же просто, как следующее изменение

    <div class="btn-toolbar">
        <div class="btn-group">
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 1                                     
            </button>           
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 2
            </button>
            <button onclick="#" class="btn btn-default btn-sm" type="button">                                               
                Click 3
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 4
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 5
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 6
            </button>
        </div>
    </div

И измените стиль только этот (переопределить загрузку), которые вынуждают поплавок влево, чтобы вы не могли заставить маркер или текстовый центр:

.btn-toolbar .btn-group {float:initial;}

Это работает для меня без особых изменений.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню