Bootstrap 3 の Fluid Grid での水平方向の配置の問題を修正するにはどうすればよいですか?

Bootstrap 3 の流体グリッドのレイアウトの問題

Bootstrap 3 を使用して流体グリッド レイアウトを作成しようとすると、位置合わせの問題が発生する可能性があります。 1 つのボックスが他のボックスの高さを超えている場合、グリッド内のボックスは水平に整列しません。この位置ずれは、列内のコンテンツの高さが異なるために発生します。

このジレンマを解決するには、次の 3 つの主要なアプローチが実行可能です。

1. CSS3 列幅による CSS のみのソリューション

2. Clearfix アプローチ

3.同位体/石材プラグイン

2017 年以降のアップデート

フレックスボックス (Bootstrap 4 および後で)

高さの不一致の問題に対する最新の解決策は、Bootstrap 4 にデフォルトで存在するフレックスボックスを使用して列の高さを強制的に同じにすることです。

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

追加リソース

ソリューションのライブ デモンストレーションなどについては、提供されたリンクにアクセスしてください。このトピックの探索。

以上がBootstrap 3 の Fluid Grid での水平方向の配置の問題を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。