Bootstrap 3 btn-group ширина

Как насчет использования статических членов класса?

//enum DocInfos { DocName, DocNumber, DocVersion};
public class DocInfos
{
    public static int DocName = 0;
    public static int DocNumer = 1;
    public static int DocVersion = 2;
}

...

            Doc = new string[DocInfos.DocVersion];
            // Treffer
            Doc[DocInfos.DocName] = TrimB(HTMLLines[lineCounter + 2])

...

23
задан Misiu 27 December 2013 в 16:44
поделиться

3 ответа

Вы можете просто использовать классы начальной загрузки 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 27 December 2013 в 16:44
поделиться

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

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

1
ответ дан max kaplan 27 December 2013 в 16:44
поделиться

Если решение @ 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 27 December 2013 в 16:44
поделиться
Другие вопросы по тегам:

Похожие вопросы: