how to arrange height of grid system in bootstrap

boot strap grid system is very useful and nice.

but cells height can not arrange in default.

ex. following image does not arrange three images height.

one way to solve it, write display:flex in div wrapping some cells.

<div style="display:flex">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

cells become arranging.

but above way are not corresponded to responsive design.

so you can write media query in css.

.div-wrapper{
display:flex;
}

@media screen and (max-width:768px) {
    .div-wrapper{
        display: block;
    }
}

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください