Bootstrap 3 の流体グリッド レイアウトの位置合わせの問題を解決するにはどうすればよいですか?

Bootstrap 3 のグリッド配置: トラブルシューティング

Bootstrap 3 の流動的なグリッド レイアウトを使用しているときに、グリッド内のボックスが失敗するという配置の問題が発生する場合があります。適切に位置を合わせるために。これは多くの場合、ボックスの高さの違いが原因です。

解決策:

1. CSS のみのアプローチ:

高さに関係なく、CSS3 列幅を利用して列間に均等なスペースを分配します。

2. 「clearfix」アプローチ:

x 列ごとに「clearfix」要素を実装し、先行する列の高さを強制的に同じにします。

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

同位体または石材プラグインを使用して、高さの自動調整を備えた動的な列ベースのレイアウトを作成します。

2017 年更新:

4.フレックスボックスの同じ高さの列:

ブートストラップ 4 でネイティブにサポートされているフレックスボックスを使用して、各行の列を同じ高さにします。

追加のメモ:

• Bootstrap 4 はデフォルトでフレックスボックスを使用し、同じ高さを確保します。 columns.
• ブートストラップの可変高さ列の詳細については、[このリソース](リンク)を参照してください。

以上がBootstrap 3 の流体グリッド レイアウトの位置合わせの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。