確保按鈕中的文字不會溢出（使用 Bootstrap v4）

Question

這是我目前的程式碼。

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

這就是它通常的樣子。

每個col都有自己的規則，因此它們會根據視窗的大小填入列。然而，有一個小的分辨率窗口，按鈕可以執行此操作：

在採用正確的佈局之前：

“但是”。按鈕的內部文字溢出，而「Button down」按鈕文字分成兩行。我怎麼才能保留「但是」中的文字呢？按鈕溢出並將“按鈕按下”按鈕中的文字分成兩行？ 我以為我可以重新編譯 Bootstrap 來重新定義 xl grid 斷點，但這填充了太多（並且對於這樣一個小問題修改 Bootstrap 是一個不好的做法）。有沒有辦法獲得我想要的行為？

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>