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;
    }
}

 

garicchi
対話システムとSFとアニメが好き たまにMicrosoftコミュニティに出現します たまに日経Linuxとラズパイマガジンで記事を書いたり Microsoft MVP 2014~2018(引退済み)

コメントする

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

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