Bootstrap 4 で列幅をカスタマイズするにはどうすればよいですか?

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 サイトの他の関連記事を参照してください。