フレックスを考慮するブートストラップカラムのプロパティ

Question

class="col-md-6"を使用したときに、セルの高さが同じであることを確認するためにdisplay: flex;を使用しました。しかし、これにより、異なる画面サイズでコンテンツを表示するときにセルが変化しなくなりました。だから、高さを維持し、ブートストラップの列プロパティを尊重するためにflexをコーディングする必要がありますか？

Here is the fiddle

Answer 1

それは既成のクラスをあきらめ、あなた自身を行うにはおそらく最高です。 flexプロパティを使用すると、幅を選択し、コンテナ内のスペースの大きさに応じて縮小または拡大するオプションを指定できます。このようにして、ある列が削除されると、他の列が拡大/縮小されて残りの領域が埋められます。

フレックスボックスがフレンドリーになったときに私はブートストラップをあきらめ、私は振り返っていません。それは私に多くの時間とコードを節約します。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

メディアクエリーでは、画面が500pxより大きくなるまでフレックスキックが行われないことに注意してください。これは、それがdivsを積み重ねただけで、私がモバイルを行う方法です。複数のメディアクエリーを実行してさまざまな画面サイズで.col幅に制御できるため、さまざまなデバイスの外観を調整できます。

注意：ブラウザのサイズを調整するために、メディアクエリが起動するように、stackoverflowのコードエディタを展開する必要があります。フレックスは、この週末に出てくるだろうと面白いの

@media(min-width:500px){ 
 
    .flex{ display:flex; } 
 
    .col{ flex: 1 1 16.6666667%; } 
 
}

<div class="flex"> 
 

 
    <div class="col"> 
 
    <p>Column 1</p> 
 
    </div><!-- col --> 
 
    
 
    <div class="col"> 
 
     <p>Column 2</p> 
 
    </div><!-- col --> 
 
    
 
    <div class="col"> 
 
    <p>Column 3</p> 
 
    </div><!-- col --> 
 
    
 
    <div class="col"> 
 
    <p>Column 4</p> 
 
    </div><!-- col --> 
 
    
 
    <div class="col"> 
 
     <p>Column 1</p> 
 
    </div><!-- col --> 
 
    
 
    <div class="col"> 
 
     <p>Column 5</p> 
 
    </div><!-- col --> 
 
    
 
    <div class="col"> 
 
     <p>Column 6</p> 
 
    </div><!-- col --> 
 
    
 
</div><!-- flex -->