Установите ширину группы кнопок на 100% и сделайте кнопки равной ширины?

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

Я сделал JSFiddle здесь: http://jsfiddle.net/BcQZR/12/

Вот HTML:

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

И вот мой текущий CSS, который не работает:

#colours { 
  width: 100%;
}

Ответы

Ответ 1

BOOTSTRAP 2 (источник)

Проблема в том, что на кнопках нет ширины. Попробуйте следующее:

.btn {width:20%;}

EDIT:

По умолчанию кнопки берут автоматическую ширину его длины текста плюс некоторое отступы, поэтому, на ваш пример, это, скорее всего, больше 14,5% для 5 кнопок (для компенсации заполнения).

Примечание:

Если вы не хотите пытаться компенсировать заполнение, вы можете использовать box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Ответ 2

Bootstrap имеет класс .btn-group-justified css.

Как он структурирован на основе типа используемых вами тегов.

С тегами <a>

<div class="btn-group btn-group-justified" role="group" aria-label="...">
   ...
</div>

С тегами <button>

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <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>

Ответ 3

Нет необходимости в дополнительном CSS, класс .btn-group-justified делает это.

Вы должны добавить это к родительскому элементу, а затем обернуть каждый элемент btn в div с помощью .btn-group, как этот

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>

Ответ 4

Мне не нравится решение ширины настроек в .btn, потому что оно предполагает, что в группе .btn всегда будет одинаковое количество элементов. Это ошибочное предположение и приводит к раздутому, специфичному для презентации CSS.

Лучшее решение - изменить способ отображения .btn-group с помощью .btn-block и дочерних .btn(s). Я считаю, что это то, что вы ищете:

.btn-group.btn-block {
    display: table;
}
.btn-group.btn-block > .btn {
    display: table-cell;
}

Вот скрипка: http://jsfiddle.net/DEwX8/123/

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

.btn-group.btn-block {
    display: flex;
}
.btn-group.btn-block > .btn {
    flex: 1;
}

Здесь скрипка: http://jsfiddle.net/DEwX8/124/

Ответ 5

Для начальной загрузки 4 просто добавьте этот класс:

w-100

Ответ 6

Angular - группа кнопок с равной шириной

Предполагая, что у вас есть массив "вещей" в вашей области действия...

Убедитесь, что родительский div имеет ширину 100%.
Используйте ng-repeat, чтобы создать кнопки в группе кнопок.
Используйте ng-style для расчета ширины для каждой кнопки.

<div class="btn-group"
     style="width: 100%;">
    <button ng-repeat="thing in things"
            class="btn btn-default"
            ng-style="{width: (100/things.length)+'%'}">
        {{thing}}
    </button>
</div>

Ответ 7

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

<div class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" class="btn btn-default btn-xs  btn-block  dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>

Ответ 8

Bootstrap 4

            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Longer nav link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>

Ответ 9

Решение Bootstrap 4

<div class="btn-group w-100">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>

Вы в основном указываете, что контейнер btn-group имеет ширину 100%, добавляя в него класс w-100. Кнопки внутри заполнят все пространство автоматически.