it-swarm.com.ru

Bootstrap 3 btn-group ширина

У меня есть еще одна проблема, связанная с Bootstrap . Я хочу добавить радио и флажки в мою форму, я хотел бы, чтобы они также приняли 100% ширины элемента формы.

Я добавил группу кнопок как это:

<div class="form-group">
    <label class="col-sm-3 control-label">Subscribe</label>
    <div class="col-sm-9">
        <div class="btn-group input-group" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option1" />Yes</label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" />Maybe</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" />No</label>
        </div>
    </div>
</div>

Это дает мне хорошие радио-подобные кнопки:

Но, как вы можете видеть, они имеют фиксированную ширину. Можно ли это исправить с помощью классов начальной загрузки? Опять же, мой пример кода: http://jsfiddle.net/Misiu/yy5HZ/5/

22
Misiu

Используйте встроенный класс .btn-group-justified: Официальные документы

Сделайте группу кнопок растянутыми в равных размерах, чтобы охватить весь ширина его родителя. Также работает с выпадающими кнопками внутри группа кнопок.

Якоря:

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

Кнопки:

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

<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-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

JSFiddle

69
Schmalzy

Вы можете просто использовать классы начальной загрузки col-n, поэтому, если у вас есть 2 кнопки, вы используете col-xs-6 на них. Проблема в том, когда у вас есть 5 кнопок, например. Нет класса для этого в системе сетки начальной загрузки. Поэтому я буду использовать одно из следующего:

Чтобы различать группы с разным количеством кнопок, используйте дополнительные пользовательские классы:

JSFiddle

CSS

.btn-group {
    width: 100%;
}
.btn-group-2 label.btn  {
    width: 50%;
}
.btn-group-3 label.btn  {
    width: 33.3%;
}

HTML 

<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="radio" name="options" id="option1" />Yes</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" />Maybe</label>
    <label class="btn btn-danger">
        <input type="radio" name="options" id="option3" />No</label>
</div>

Если вы хотите избежать этих классов CSS, вы можете использовать только jQuery:

JSFiddle

$('.btn-group').each(function(index, item) {
    $(item).find('.btn').css(
        'width', 100 / $(item).find('.btn').length + '%'
    )
});
4
Markus Kottländer

Другое решение:

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > button {
    width: 100%;
}
1
Feeco

Вы можете просто добавить свой собственный класс и дать ему ширину 33% (для 3 кнопок) или 50% (для 2 кнопок).

0
Valerie

Для начальной загрузки 4 документы говорят, что вы можете сделать это:

Удалено .btn-group-justified. В качестве замены вы можете использовать <div class="btn-group d-flex" role="group"></div> в качестве оболочки для элементов с .w-100.

0
max kaplan

Если решение @ Schmalzy не работает, возможно, вы используете Bootstrap v3.0.0, для которого добавьте следующие стили в дополнение к html-разметке в решении @ Schmalzy.

.btn-group-justified > .btn-group .btn {
    width: 100%;
}

.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}
0
ZerosAndOnes