Assurez-vous que le texte du bouton ne déborde pas (en utilisant Bootstrap v4)

Question

Voici mon code actuel.

<div class="col-xl-2 col-lg-12">
    <button class="btn btn-secondary w-100" value=1>But.</button>
</div>
<div class="col-xl-4 col-lg-12">
    <button class="btn btn-secondary w-100" value="1">Button Down</button>
</div>
<div class="col-xl-4 col-lg-12">
    <button class="btn btn-secondary w-100" value="1">Button Up</button>
</div>
<div class="col-xl-2 col-lg-12">
    <button class="btn btn-secondary w-100">But.</button>
</div>

Voici à quoi ça ressemble habituellement.

Chacun col a ses propres règles, ils remplissent donc les colonnes en fonction de la taille de la fenêtre. Cependant, il existe une petite fenêtre de résolution dans laquelle le bouton peut faire ceci :

Avant d'adopter la bonne mise en page :

"Mais". Le texte intérieur du bouton déborde, tandis que le texte du bouton « Bouton vers le bas » est divisé en deux lignes. Comment puis-je conserver le texte dans « mais » ? Le bouton déborde et divise le texte du bouton « bouton enfoncé » en deux lignes ? Je pensais pouvoir recompiler Bootstrap pour redéfinir les points d'arrêt de la grille xl, mais c'est trop de remplissage (et c'est une mauvaise pratique de modifier Bootstrap pour un si petit problème). Existe-t-il un moyen d'obtenir le comportement que je souhaite ?

Answer 1

Le principal problème est que j'essaie d'utiliser w-100 使按钮的宽度为 100%。问题是，当屏幕为手机大小时，行为是预期的（按钮水平填充列）。然而，在大屏幕上，有一个小的分辨率窗口，在此期间 w-100 pour forcer le bouton à être plus petit que l'espace requis pour le texte intérieur (puisque la largeur du bouton est de 100 % de la colonne pour le contenir).

Pour résoudre ce problème, j'ai supprimé les deux "mais" du w-100. bouton et ajouter mes propres règles à mon CSS.

@media (max-width: 1199.98px) {
    .btn-full-width {
      width: 100%;
    }
  }

Ainsi, par défaut, le bouton occupe autant d'espace que le texte intérieur l'exige, et sur les écrans plus petits (toute résolution inférieure au point d'arrêt XL), il occupe toute la colonne.

Un autre problème concernant la division du texte en deux lignes a été corrigé avec la classe text-nowrap dans les deux autres boutons.

<div class="row mb-2">
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width">But.</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100">Button up</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100" type="button">Button down</button>
    </div>
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width invert-button" type="button">But.</button>
    </div>
</div>