web-dev-qa-db-fra.com

Bootstrap la taille des boutons ne fonctionne pas?

Voici trois tailles de boutons différentes:

<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>

Ces trois résultats aboutissent à ceci:

screenshot

Pourquoi btn, btn-success, btn-danger et btn-group tout fonctionne, mais pas btn-mini/small/etc?

twitter-bootstraptwitter-bootstrap-3
38
Scott Beeson

Bootstrap a changé le nom de leurs boutons de v2.3 à v3.0 :

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

Voici un Guide de migration complet de Bootply.

Votre code mis à jour devrait donc ressembler à ceci:

<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>

Démonstration de travail dans jsFiddle

Ce qui produira ceci:

screenshot

103
KyleMit

(Si quelqu'un est venu ici en se demandant pourquoi btn-xs ou btn-group-xs ne fonctionne pas dans> = 4.0)

Changer le journal de bootstrap 3.0 à 4.0:

Suppression de la classe .btn-xs entièrement car .btn-sm est proportionnellement beaucoup plus petite que la v3.

...

Suppression de la classe .btn-group-xs en raison de la suppression de .btn-xs.

Source

13
Caner

Vous devez changer les classes si vous utilisez la version 3.

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>
5
amatellanes

Assurez-vous également que si bootstrap.css est remplacé par notre propre fichier * .css personnalisé, vous avez la logique .btn-sm .... ajoutée dans votre fichier * .css personnalisé. C'était le problème dans mon cas, il s'est avéré.

2
Kanban