Размер кнопки Bootstrap не работает?

Вот три разных размера кнопок:

<div class="btn-group btn-small">
    <button class="btn btn-small btn-success" href="#" type="button">Approve</button>
    <button class="btn btn-small btn-danger" href="#" type="button">Deny</button>
</div>

<div class="btn-group">
    <a class="btn btn-mini btn-success" href="#">Approve</a>
    <a class="btn btn-mini btn-danger" href="#">Deny</a>
</div>

<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

Все три из них приводят к следующему:

Почему все btn, btn-success, btn-danger и btn-group работают, но не btn-mini/small/etc?

Ответ 1

Bootstrap изменил имена своих кнопок с v2.3 на v3.0:

   2.3     -->   3.0  
.btn-large --> .btn-lg  
.btn-small --> .btn-sm  
.btn-mini  --> .btn-xs

Здесь Руководство по полной миграции из Bootply.

Итак, ваш обновленный код должен выглядеть так:

<div class="btn-group">
    <a class="btn btn-xs btn-success" href="#">Approve</a>
    <a class="btn btn-xs btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-sm btn-success" href="#">Approve</a>
    <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

Рабочая демонстрация в jsFiddle

Что это даст:

Ответ 2

(Если кто-то пришел сюда, задаваясь вопросом, почему btn-xs или btn-group-xs не работает в> = 4.0)

Журнал изменений с начальной загрузки 3.0 на 4.0:

Исключил класс .btn-xs, так как .btn-sm пропорционально много меньше, чем v3s.

...

Удалил класс .btn-group-xs целиком из-за удаления .btn-xs.

Источник

Ответ 3

Вы должны изменить классы, если используете версия 3.0

http://jsfiddle.net/WrQNh/1/

<div class="btn-group btn-small">
    <button class="btn btn-xs btn-success" href="#" type="button">Approve</button>
    <button class="btn btn-xs btn-danger" href="#" type="button">Deny</button>
</div>
<br>
<div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a>
     <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group"> <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

Ответ 4

Также убедитесь, что bootstrap.css переопределяется нашим собственным настроенным *.css файлом, чем вы добавили .btn-sm.... логику в ваш настраиваемый *.css файл. Это было проблемой в моем случае, как оказалось.