Bootstrap 3 から Bootstrap 4 に移行する際の垂直列の配置の問題を修正するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-10 20:18:02
オリジナル
1007 人が閲覧しました

How to Fix Vertical Column Alignment Issues When Migrating from Bootstrap 3 to Bootstrap 4?

ブートストラップ 3 からブートストラップ 4: 垂直方向の列の配置が解決されました

ブートストラップ 3 から 4 に移行する際に、垂直方向の配置の問題が発生する可能性があります。あなたのコラム。これは、Bootstrap 4 でネストされた列の処理方法に構造的な変更が導入されたために発生します。

この問題を修正し、水平方向の列の配置を復元するには、ネストされた列を囲む Col-12 クラスを削除することが不可欠です。ドキュメントで説明されているように、ブートストラップ 4 ではネストするための新しい行が必要です。

「ブートストラップ 3 で .col-xs-* を使用した場合は、ブートストラップ 4 では必ず .row を、行が問題を引き起こす可能性があります。"

改訂コード:

<div class="row">
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
</div>
ログイン後にコピー

さらに、これは JavaScript Fiddle を使用して検証できます:

https:// jsfiddle.net/aq9Laaew/4791/

以上がBootstrap 3 から Bootstrap 4 に移行する際の垂直列の配置の問題を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート