Полная ширина сплит-кнопки в Twitter-бутстрап

У меня есть место на моем сайте, которое использует кучу элементов button, стилизованных в btn-block (пример из документации Twitter Bootstrap). Теперь я хочу переключить некоторые из них на разделенные кнопки (пример), но я не могу заставить кнопки разделения и обычные кнопки одинаковой длины.

Я экспериментировал со всеми вещами, но я не могу найти способ сделать это. Кто-нибудь когда-нибудь мог это сделать? Имейте в виду, что я не хочу жестко кодировать ширину любых элементов, если мне это не нужно. (Обратите внимание, что это включает в себя не использование жестко запрограммированных процентов.) Если это абсолютно необходимо, я в порядке с определением ширины для переключающей части кнопки (потому что я знаю, что там будет только один символ стрелки), но хотите указать как можно меньше "магических чисел", чтобы поддерживать код в будущем.

Ответ 1

Оберните выпадающий вывод в контейнере:

(Примечание: этот пример относится к Bootstrap 2.x)

.dropdown-lead {
  width: 100%;
}

.leadcontainer {
  left: 0;
  position: absolute;
  right: 30px;
}

.dropdown-toggle {
  width: 30px;
  float: right;
  box-sizing: border-box;
}

.fillsplit {
  position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>

<button class="btn btn-block btn-primary" type="button">Block level button</button>
<div class="btn-group btn-block fillsplit">
  <div class="leadcontainer">
    <a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a>
  </div>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a>
    </li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a>
    </li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a>
    </li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a>
    </li>
  </ul>
  <div>
  </div>

Ответ 2

Я искал такое же поведение и нашел это решение flexbox: http://codepen.io/ibanez182/pen/MwZwJp

Это элегантная реализация, которая использует свойство flex-grow.

Просто добавьте класс .btn-flex в .btn-group в свой HTML. Это все необходимое CSS:

.btn-flex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
}

.btn-flex .btn:first-child {
    flex-grow: 1;
}

Кредит принадлежит автору пера: Nicola Pressi

Ответ 3

Если вы добавите класс btn-block в элемент .btn-group и дадите элементам dropdownbutton% widths, это сделало бы трюк.

.dropdown-lead{
    width: 96%;
    box-sizing: border-box;
}
.dropdown-toggle{
    width: 4%;
    box-sizing: border-box;
}

Вот пример: http://jsfiddle.net/eBJGW/5/