web-dev-qa-db-fra.com

Comment obtenir un bouton responsive dans bootstrap 3

J'utilise bootstrap 3 et j'ai le code HTML suivant:

<div class="col-sm-2" >
    <a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>

Sur un petit écran, le texte "Créer un nouveau forum" est trop long pour tenir sur le bouton. Je voudrais que le texte se termine sur une autre ligne et que la hauteur du bouton augmente pour s’adapter au texte. Aucune astuce sur comment le faire?

csstwitter-bootstrapbuttontwitter-bootstrap-3
50
PropertyWebBuilder

Dans Bootstrap, le .btn la classe a un white-space: nowrap; _ propriété, faisant en sorte que le texte du bouton ne soit pas renvoyé à la ligne. Ainsi, après avoir défini ce paramètre sur normal et attribué au bouton width, le texte devrait être renvoyé à la ligne suivante si le texte dépassait la valeur définie width.

#new-board-btn {
    white-space: normal;
}

http://jsfiddle.net/ADewB/

83
MattDiamant

Je sais que cela a déjà une réponse marquée, mais je sens que je l’ai amélioré.

La réponse marquée est un peu trompeuse. Il a défini une largeur pour le bouton, ce qui n'est pas nécessaire, et les largeurs définies ne sont pas "réactives". Pour sa défense, il mentionne dans un commentaire ci-dessous que la largeur n'est pas nécessaire et qu'elle n'est qu'un exemple.

Une chose qui n’a pas été mentionnée ici, c’est que les mots risquent de se briser au milieu d’une Parole et de paraître confus.

Ma solution, force la rupture entre les mots, une belle enveloppe de mots.

.btn-responsive {
    white-space: normal !important;
    Word-wrap: break-Word;
}

<a href="#" class="btn btn-primary btn-responsive">Click Here</a>
29
Wade

Pour ceux qui sont intéressés, une autre approche consiste à utiliser les requêtes @media pour redimensionner les boutons sur différentes largeurs de fenêtres.

Démo: http://bootply.com/93706

17
Zim

Dans certains cas, il est très utile de changer la taille de la police avec des unités de taille de police relative. Par exemple:

.btn {font-size: 3vw;}

Démo: http://www.bootply.com/7VN5OCVhhF

1vw correspond à 1% de la largeur de la fenêtre. Plus d'infos: http://www.sitepoint.com/new-css3-relative-font-size/

4
MartySK
<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

Nous pouvons utiliser btn-block pour le responsive automatique.

2
Priyanko