Das ist mein aktueller Code.
So sieht es normalerweise aus.
Jedescolhat 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?
主要问题是我试图用
w-100使按钮的宽度为 100%。问题是，当屏幕为手机大小时，行为是预期的（按钮水平填充列）。然而，在大屏幕上，有一个小的分辨率窗口，在此期间w-100强制按钮小于内部文本所需的空间（因为按钮宽度是列的 100%）包含它）。为了解决这个问题，我删除了这两个“但是”的 w-100。按钮并将我自己的规则添加到我的 css 中。
@media (max-width: 1199.98px) { .btn-full-width { width: 100%; } }因此，默认情况下，按钮占用的空间与内部文本所需的空间一样多，而在较小的屏幕上（低于 XL 断点的任何分辨率），它占用整列。
关于文本被分成两行的另一个问题已通过其他两个按钮中的
text-nowrap类修复。