あなたの質問に答えるには、css を前に付けた完全なレスポンシブデモを見る必要があります:
/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/
@media only screen and (min-width : 481px) {
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
上記のスクリーンショットのようにフレックス列内にサムネイル コンテンツ フレックスのサポートを追加するには、これも追加します... パネルでも同様に実行できることに注意してください。
.flex-row .thumbnail,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.flex-text {
flex-grow: 1;
}
.flex-row img {
width: 100%;
}
Flexbox は IE9 以下では機能しませんが、javascript グリッドのような条件付きタグをポリフィルとして使用するフォールバックでデモを使用できます。
<!--[if lte IE 9]>
<![endif]-->
受け入れられた回答の他の2つの例については...テーブルデモはまともなアイデアですが、間違って実装されています。その CSS を特にブートストラップ列クラスに適用すると、間違いなくグリッド フレームワークが完全に壊れます。[class*='col-']幅が定義されているテーブル スタイルを適用してはならない 1 つと 2 つのカスタム セレクターを使用する必要があります。このメソッドは、同じ高さと同じ幅の列が必要な場合にのみ使用してください。他のレイアウト用ではなく、レスポンシブではありません。ただし、モバイルディスプレイではフォールバックできます...
<div class="table-row-equal">
<div class="thumbnail">
Content...
</div>
<div class="thumbnail">
Content...
</div>
</div>
@media only screen and (min-width : 480px){
.table-row-equal {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 30px 0px;
word-wrap: break-word;
}
.table-row-equal .thumbnail {
float: none;
display: table-cell;
vertical-align: top;
width: 1%;
}
}
最後に、 1 つの真のレイアウトのバージョンを実装する受け入れられた回答の最初のデモは、状況によっては適切な選択ですが、ブートストラップ列には適していません。これは、すべての列がコンテナーの高さまで拡張されるためです。したがって、列は隣の要素ではなくコンテナ全体に展開されるため、応答性も損なわれます。この方法では、行に下部マージンを適用することもできなくなり、途中でアンカー タグへのスクロールなどの問題が発生することもあります。
完全なコードについては、フレックスボックス コードに自動的にプレフィックスを付ける Codepen を参照してください。
