問題タブ [grid-system]

最近、フレックスボックスと独自のグリッド システムの作成方法を学んでいます。フロートを使用してグリッド システムを作成する場合、レイアウトごとの列数と各列の幅をパーセンテージで決定します。しかし、flexbox を使用する場合、私が見たすべてのレイアウト チュートリアルは、単純に列に対してflex-direction: row;andflex: 1 を使用して、すべての列を同じサイズ、同じ溝、中央に配置し、1 行にするだけです。しかし、github で flexboxgrid のソース コードを確認したところ、ブートストラップ 3 と同じ原則が使用されています。さまざまな画面サイズの列があり、12 列とflex-growがshrink無効になっています。代わりに、各列は のように幅のパーセンテージで決定されますcol-xs-1 max-width: 8.33%。

今、私はこれら 2 つの手法の違いは何なのか、どちらがより好ましいのか疑問に思っています。つまり、各列の幅を決定するには多くのカウントが必要ですが、flex grow プロパティを使用すると、主軸のビューポート全体が同じサイズの列とガターで満たされるだけです。

フィドル: https://jsfiddle.net/uatzust3/

これが私の問題のフィドルです。子が親のdiv内にとどまっていないことがわかります。cardまた、divsが親の全幅をとっていないことを確認します。

また、どこでベスト プラクティスを学習すればよいですか? 私はコミュニティに不慣れです。前もって感謝します。

左の divはコンテンツが不足していますが、div内にとどまりながら(black_container)、右の div の幅に従って高さを調整する必要があります。(content_container)card

div をブートストラップに合わせるのに問題があります。中央の大きな div は、側面のボックスを押し下げています。このレイアウトを実現するにはどうすればよいですか?

私が達成したいdivのレイアウト：

私のグリッドの 3 番目の要素は、左側に壊れていません。代わりに、右側に壊れています。これは、柱が同じ高さではないためだと思います。コードの作成方法により、1x4、2x2、4x1 の順に表示されるため、単純に 2 行をアタッチすることはできません。グリッドシステムを本来の方法で動作させたいので、javascriptまたはcssを使用して画面サイズに応じて行を表示および非表示にすることに頼りたくありません。参照用に私のコードのサンプルを添付します。

次のようなコンテナー クラスを持つ div 要素があります。

私のコードからわかるように、内側の div で foor ループを実行すると、各行に 3 つの項目が表示されます。また、span タグには、オブジェクトごとに異なるクラス属性が必要です。

次のようになります。

しかし、これによりグリッド ビュー システムがクラッシュします。どうすればそれができますか？ここでの私の焦点は、span タグです。オブジェクトを適切なクラスで表示したい。

正しいフォーム (これが私がなりたいものです) :

正しいフォーム

間違ったフォーム (これが現在のフォームです):

間違ったフォーム

**更新** 正しいコード（より良い練習のために）：

ネストされた行の整列に問題があります。下の図を参照してください。私は 1 行を 9 として、3 行を 3 として持っています。md および lg 画面では 9+3=12 です。sm画面では、行1を12とし、その下に他の3行（4 + 4 + 4）を配置したいと考えています。

https://s28.postimg.org/f0xa2380t/helpbootstrap.png

https://jsfiddle.net/proabid/qLg72vns/