ボタン内のテキストがオーバーフローしないようにしてください (Bootstrap v4 を使用)

Question

これは私の現在のコードです。

リーリー

通常はこんな感じです。

各 col には独自のルールがあるため、ウィンドウのサイズに基づいて列が設定されます。ただし、これを実行するボタンを備えた小さな解像度ウィンドウがあります:

正しいレイアウトを採用する前に:

＃＃＃"しかし"。ボタンの内部テキストはオーバーフローし、「ボタンダウン」ボタンのテキストは 2 行に分割されます。テキストを「しかし」のままにするにはどうすればよいですか?ボタンがオーバーフローして「ボタンが押されました」ボタンのテキストが 2 行に分割されますか? Bootstrap を再コンパイルして xl グリッド ブレークポイントを再定義できると考えましたが、それはパディングが多すぎます (そして、このような小さな問題のために Bootstrap を変更するのは悪い習慣です)。希望の動作を実現する方法はありますか?

Answer 1

主な問題は、w-100 を使用してボタンの幅を 100% にしようとしていることです。問題は、画面が電話サイズの場合、予期される動作 (ボタンが列を水平方向に埋める) であることです。ただし、大きな画面では、狭い解像度ウィンドウがあり、w-100 によってボタンが内部テキストに必要なスペースよりも強制的に小さくなります (ボタンの幅がボタンを含む列の 100% であるため) ）。

この問題を解決するために、w-100 の 2 つの「しかし」を削除しました。ボタンをクリックして独自のルールを CSS に追加します。

リーリー

したがって、デフォルトでは、ボタンは内部テキストが必要とするのと同じだけのスペースを占め、小さな画面 (XL ブレークポイント以下の解像度) では列全体を占めます。

テキストが 2 行に分割されるという別の問題は、他の 2 つのボタンの text-nowrap クラスによって修正されました。

リーリー