ブートストラップグリッド疑問

Question

私は文字どおり他のことについて考えることができませんが、これは私をそんなに悩ませています。 boostrap.cssでのグリッドが異なるメディアを持っているのはなぜ

は.col-sm-*, .col-md-*などにに照会したが内部flex: ; & max-width: ;は、それらのすべてで同じです！

なぜ「ワイルドカードセレクタ」を使用せず、一度定義したのですか？代わりに、事前に

.col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; } 
.col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } 

感謝の

[class*="col-1-"] { flex: 0 0 8.333333%; max-width: 8.333333%; } 
[class*="col-2-"] { flex: 0 0 16.666667%; max-width: 16.666667%; } 

：このような

何か！例えば、パー

Answer 1

ので、あなたのhtmlでこのようなものを使用することができますので、それはその方法である：

<div class="row"> 
    <div class="col-12 col-sm-6 col-md-8">1st column</div> 
    <div class="col-12 col-sm-6 col-md-4">2nd column</div> 
</div> 

画面サイズがmin-width: 576pxの場合は、他の2つではなく.col-sm-6を使用してください。

.col-md-*クラスはメディアクエリ内でのみ定義されるため、画面幅がそのメディアクエリと一致する場合にのみアクティブになります。

これを行うと、そのクラスは常にアクティブになるため、動作しません。

これがあなたの疑問を解決することを願っています。

Answer 2

それは（それは常に親の割合になるという意味）のパーセント値なので、それはcol-sm-1またはcol-md-1両方flexとmax-widthであるかどうかは、同じ値を持つことになりますので

は：col-sm-1ため 最大幅は、常に親の幅の8.333333% ...となりますなど