Выравнивание кнопок с помощью Bootstrap v4

Bootstrap v4 удаляет класс .btn-group-justified, см. https://github.com/twbs/bootstrap/issues/17631

Как обосновать кнопку для:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

css bootstrap-4 twitter-bootstrap-4
person Bass Jobsen    schedule 24.12.2015    source источник

Ответы (4)


arrow_upward
75
arrow_downward

Для тех, кто найдет это после выпуска Bootstrap 4 Beta...

<div class="btn-group d-flex" role="group">
   <a href="" class="btn btn-secondary w-100">Previous</a>
   <a href="" class="btn btn-secondary w-100">Next</a>
</div>

person Chris Baswell    schedule 30.08.2017
comment
Спасибо, это то, что я искал... Я думаю, мне нужно больше узнать о гибких стилях в Bootstrap 4. - person Eduardo Yáñez Parareda; 12.10.2017
comment
Должен быть первый ответ, нет необходимости в пользовательском CSS, менее хакерском. Отличная работа! - person slothstronaut; 06.11.2017
comment
простой, острый и чистый. большой! - person Cristian Sepulveda; 29.08.2019

arrow_upward
24
arrow_downward

Действительно, класс nav-justify отсутствует. Вы можете добавить его самостоятельно на основе кода TB3:

код SCSS

// Justified button groups
// ----------------------

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  .btn,
  .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

скомпилированный CSS-код

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn-group-justified .btn,
  .btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%; }
    .btn-group-justified .btn .btn,
    .btn-group-justified .btn-group .btn {
      width: 100%; }
    .btn-group-justified .btn .dropdown-menu,
    .btn-group-justified .btn-group .dropdown-menu {
      left: auto; }

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

Приведенный выше HTML-код теперь будет выглядеть так, как показано на рисунке ниже:

введите здесь описание изображения

Обработка границ

  • Из-за специфического HTML и CSS, используемых для выравнивания кнопок (а именно display: table-cell), границы между ними удваиваются. В обычных группах кнопок margin-left: -1px используется для сложения границ вместо их удаления. Однако margin не работает с display: table-cell. В результате, в зависимости от ваших настроек Bootstrap, вы можете удалить или перекрасить границы.

Ссылки, работающие как кнопки

  • Если элементы <a> используются в качестве кнопок — для запуска функций на странице, а не для перехода к другому документу или разделу на текущей странице — им также следует присвоить соответствующий role="button".

Выпадающие списки

Используйте следующий код HTML для выпадающих кнопок:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
   <a class="btn btn-secondary" href="#" role="button">Left</a>
   <a class="btn btn-secondary" href="#" role="button">Middle</a>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
 </div>

Выровненная группа кнопок с выпадающей кнопкой должна выглядеть так, как показано на рисунке ниже:

введите здесь описание изображения

С <button> элементами

  • Чтобы использовать группы кнопок по ширине с <button> элементами, необходимо поместить каждую кнопку в группу кнопок. Большинство браузеров неправильно применяют наш CSS для выравнивания к <button> элементам, но поскольку мы поддерживаем выпадающие списки кнопок, мы можем обойти это.

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Left</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Middle</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Right</button>
  </div>
 </div>

Приведенный выше HTML-код, используемый для выравнивания групп кнопок с элементами <button>, должен выглядеть так, как показано на рисунке ниже:

введите здесь описание изображения

person Bass Jobsen    schedule 24.12.2015
comment
зачем устанавливать ширину кнопки на 1% внутри группы кнопок? Это предназначено? - person luQ; 18.10.2017

arrow_upward
24
arrow_downward

Основываясь на отличном ответе Басса Джобсена, здесь та же функциональность с использованием flexbox вместо display: table;

код SCSS

// Justified button groups
// ----------------------

.btn-group-justified {
  display: flex;
  width: 100%;
  .btn,
  .btn-group {
    flex: 1;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

HTML

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

Пожалуйста, обратитесь к ответу Басса Джобсена для получения более подробной информации об использовании раскрывающихся списков, ссылок HTML и многого другого.

person Philip Stanislaus    schedule 24.08.2016
comment
Отлично, это также позволяет избежать проблемы с двойной границей - person Giuseppe; 25.08.2016
comment
Предложение: добавьте & + & {margin-top: $btn-block-spacing-y;}, чтобы отделить друг от друга группы кнопок с выравниванием по ширине. - person CBarr; 28.11.2016

arrow_upward
0
arrow_downward

При использовании с class="dropdown-menu" с Bootstrap V4.0 на основе приведенного выше решения Криса Басвелла и документации Bootstrap: https://getbootstrap.com/docs/4.0/components/button-group/#nesting

<div class="btn-group d-flex" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle-no-carret w-100" title="MANAGE ENTRIES" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Drop Down
        </button>
        <div class="dropdown-menu">
            <a href="" class="btn btn-secondary w-100">Previous</a>
            <a href="" class="btn btn-secondary w-100">Next</a>
        </div>
    </div>
</div>
person Community    schedule 07.03.2018