Stellen Sie sicher, dass der Text in der Schaltfläche nicht überläuft (mit Bootstrap v4)

Question

Das ist mein aktueller Code.

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

So sieht es normalerweise aus.

Jedes col hat seine eigenen Regeln, daher füllen sie die Spalten basierend auf der Größe des Fensters. Allerdings gibt es ein kleines Auflösungsfenster, in dem die Schaltfläche dies tun kann:

Bevor Sie das richtige Layout übernehmen:

„Aber“. Der innere Text der Schaltfläche läuft über, während der Text der Schaltfläche „Button runter“ in zwei Zeilen aufgeteilt ist. Wie kann ich den Text in „aber“ behalten? Schaltflächenüberlauf und Text in der Schaltfläche „Taste gedrückt“ in zwei Zeilen aufteilen? Ich dachte, ich könnte Bootstrap neu kompilieren, um die XL-Raster-Haltepunkte neu zu definieren, aber das ist zu viel Auffüllen (und es ist eine schlechte Praxis, Bootstrap für ein so kleines Problem zu ändern). Gibt es eine Möglichkeit, das gewünschte Verhalten zu erreichen?

Answer 1

主要问题是我试图用 w-100 使按钮的宽度为 100%。问题是，当屏幕为手机大小时，行为是预期的（按钮水平填充列）。然而，在大屏幕上，有一个小的分辨率窗口，在此期间 w-100 强制按钮小于内部文本所需的空间（因为按钮宽度是列的 100%）包含它）。

为了解决这个问题，我删除了这两个“但是”的 w-100。按钮并将我自己的规则添加到我的 css 中。

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

因此，默认情况下，按钮占用的空间与内部文本所需的空间一样多，而在较小的屏幕上（低于 XL 断点的任何分辨率），它占用整列。

关于文本被分成两行的另一个问题已通过其他两个按钮中的 text-nowrap 类修复。

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