Bootstrap を使用して、2 列のグリッドに可変高さのコンテンツを多数含むレスポンシブ Web サイトを作成しています。現在、機能的にはすべて問題ありませんが、1 つの行の 2 つのアイテムの高さが異なる場合に発生する行間の醜い空白を取り除きたいと考えています。2 つの span6 分割とそれぞれに独立した行を配置するだけでこれを簡単に行うことができますが、問題は、小さなディスプレイ用の Bootstrap のグリッド スタッキングでは、左の列がすべて右の列の上にスタックされることです。右、次に上から下。
解決策については、次のスレッドを見つけました。
...および他のいくつかのあいまいな回答がありますが、ページのレンダリング方法にサーバー側の変更を加えたくないため、どれも機能しません。むしろ、 HTML、CSS、および JSのみを変更することでこの問題を解決する方法があるかどうかを確認したいです。つまり、Bootstrap 全体に関係する解決策を見つけたいと考えています。私は HTML、CSS、および JS への追加を受け入れますが、前述のとおり、サーバー側は何も追加しません。
何を扱っているか、何が問題で、何を達成したいかを視覚化した表を作成しました。http://i.imgur.com/AAl9ZBu.pngでご覧ください。
どうもありがとうございました。
更新:これを修正するためのかなり単純なアイデアを思いつきました: デスクトップ レイアウトを修正するがモバイル レイアウトを壊すソリューションで 2 列のパラダイムを使用し、1 つおきのグリッド項目を複製し、2 つの間で表示を切り替えます。彼ら。たとえば、4 項目のグリッドでは、左側の列に項目 1、2、3、および 4 があり、項目 2 と 4 は display:none に設定され、右側の列には項目 2 と 4 が含まれます。 -width:767px) が true になり、左の列の項目 2 と 4 がオンになり、display:none が左の列全体に適用されます。
これはおそらく最も効率の悪い解決策なので、あなたの解決策を読みたいです。