[Résolu] Redimensionnement selon conteneur des boutons bootstrap

Bonjour à tous !

Je viens de refaire une version basique de mon blog avec spip et bootstrap.

Dans l'espoir d'avoir un meilleur référencement, j'ai mis le titre de mes articles dans les liens qui sont en fait de bouton bootstrap. Malheureusement, ceux-ci, lorsqu'ils sont longs, dépassent en largeurs leur conteneurs...

Voici le lien vers mon blog : http://blog.robomatix.net/

Merci d'avance vos éventuelles piste pour y remédier...
Modifié par robomatix rebirth (24 Feb 2014 - 17:53)

Bonjour,

C'est la propriété white-space: nowrap; de la classe .btn qui bloque les retours de ligne quand le texte est trop long.
Bootstrap ne fournit pas de classe complémentaire pour appliquer un white-space: normal;.

Il faudrait que vous l'écriviez explicitement dans votre feuille de style :

main .btn-lg {
     white-space: normal;
}

Ou en écrivant une classe complémentaire que vous rajouteriez à votre bouton :

.btn-break {
     white-space: normal;
}

<a href="#" class="btn btn-primary btn-lg [b]btn-break[/b]" role="button">Lire : titre de mon article</a>

Ainsi vous aurez le rendu final suivant :


Bonne journée et bon code...
Modifié par Guiwint (24 Feb 2014 - 11:09)

Merci Guiwint. Ca marche !

J'ai choisi de créer une nouvelle class dans la css theme. Ainsi, le comportement des boutons dans bootstrap ne change pas et il me sera plus facile de m'y retrouver lorsqu'il y aura une nouvel version de bootstrap...

Merci de tes encouragements !

Bonne journée à toi...