這是我目前的程式碼。
這就是它通常的樣子。
每個col都有自己的規則，因此它們會根據視窗的大小填入列。然而，有一個小的分辨率窗口，按鈕可以執行此操作：
在採用正確的佈局之前：
“但是”。按鈕的內部文字溢出，而「Button down」按鈕文字分成兩行。我怎麼才能保留「但是」中的文字呢？按鈕溢出並將“按鈕按下”按鈕中的文字分成兩行？ 我以為我可以重新編譯 Bootstrap 來重新定義 xl grid 斷點，但這填充了太多（並且對於這樣一個小問題修改 Bootstrap 是一個不好的做法）。有沒有辦法獲得我想要的行為？
主要問題是我試圖用
w-100使按鈕的寬度為 100%。問題是，當螢幕為手機大小時，行為是預期的（按鈕水平填充列）。然而，在大螢幕上，有一個小的解析度窗口，在此期間w-100強制按鈕小於內部文字所需的空間（因為按鈕寬度是列的 100%）包含它）。為了解決這個問題，我刪除了這兩個「但是」的 w-100。按鈕並將我自己的規則新增到我的 css 中。
@media (max-width: 1199.98px) { .btn-full-width { width: 100%; } }因此，預設情況下，按鈕佔用的空間與內部文字所需的空間一樣多，而在較小的螢幕上（低於 XL 斷點的任何解析度），它佔用整列。
關於文字被分成兩行的另一個問題已透過其他兩個按鈕中的
text-nowrap類別修復。