ホームページ >ウェブフロントエンド >CSSチュートリアル >Bootstrap 4 で列幅をカスタマイズするにはどうすればよいですか?
col-sm-xx を使用して Bootstrap 3 で列幅をカスタマイズする機能は Bootstrap 4 で廃止されました。この変更は次の理由によるものである可能性があります。 Bootstrap 4 のフレックスボックスの実装では、レイアウトに別のアプローチが提供されます。 Bootstrap 4 で列のサイズを変更するには、別の解決策を検討できます。
テーブル クラスの存在を確認する
まず、テーブルに「テーブル」が含まれていることを確認します。クラス。 Bootstrap 4 テーブルはオプトインなので、このクラスを明示的に追加する必要があります。これは、適切な書式設定と列のサイズ変更に不可欠です。
フレックスボックスと CSS の変更
Bootstrap 3 では、テーブル セルがフローティングになるのを防ぎ、セルが正しく動作することを保証するために CSS が使用されていました。 。ただし、この CSS は Bootstrap 4 アルファには含まれていません。この CSS を手動で追加すると、列がテーブル ヘッダー (thead) で指定された幅に確実に準拠するようにすることができます。
テーブル セルの d-inline-block
別のアプローチ「d-inline-block」クラスをテーブルセル(td)に適用することです。これにより、列のデフォルトの「display:flex」動作が無効になり、適切な幅を想定できるようになります。
サイジング ユーティリティ クラス
Bootstrap 4 は、「」のようなサイジング ユーティリティ クラスを提供します。 w-25" および "w-50" は列に特定の幅を設定します。これらのクラスは、列のサイズ変更の簡素化された応答性の高い方法を提供します。
Flexbox クラスとcol-* Grid クラス
テーブル行で d-flex クラスを利用することもできます ( tr) と列 (th,td) のcol-* グリッド クラス。このアプローチにより、柔軟で応答性の高い列幅が可能になります。
注: テーブルの行で display:flex を使用すると、テーブルの境界線に影響を与える可能性があり、追加の調整が必要になります。
要約すると、列Bootstrap 4 のサイズは、フレックスボックスへの移行により変更されました。テーブル クラスの存在を確認する、CSS を変更する、テーブル セルに d-inline-block を使用する、ユーティリティ クラスのサイズを変更する、行と列に Col-* グリッド クラスを使用するフレックスボックスなど、代替ソリューションが利用可能です。
以上がBootstrap 4 で列幅をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。