Bootstrap 3 流体グリッド レイアウトで位置がずれているボックスを修正するにはどうすればよいですか?

Bootstrap 3 流体グリッド レイアウトの問題のトラブルシューティング

Bootstrap 3 流体グリッド レイアウト内で位置ずれが発生しましたか?ボックスを一列に並べることができないと、イライラする問題が発生する可能性があります。根本的な原因は、箱の中身の​​高さが異なることにあります。この問題を解決する効果的な方法は次のとおりです。

1. CSS アプローチ (CSS3 列幅)

CSS3 列幅を使用して次のアプローチを実装します: [Bootply Demo](http://bootply.com/85737)

2 。 「Clearfix」アプローチ (レスポンシブ リセット)

Bootstrap が推奨する「clearfix」アプローチを利用します: [Bootply Demo](http://bootply.com/89910)

3. Isotope/Masonry プラグイン

代替ソリューションとして、Isotope/Masonry プラグインの使用を検討してください: [Bootply Demo](http://bootply.com/61482)

2017 年のアップデート: フレックスボックスソリューション

Bootstrap 4 では、フレックスボックスが最適なソリューションを提供します:

CSS:

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

デモ: [Flexbox Equal Height](https://codepen .io/anon/pen/EbpvGe)

追加リソースブートストラップ可変高さ列の場合:

• [ブートストラップ可変高さ列](https://getbootstrap.com/docs/4.0/layout/grid/#equal-width)

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