هم اندازه کردن ارتفاع ستون‌ها در بوت استرپ

چگونه در قالب بوت استرپ ارتفاع ستونها را هم اندازه کنیم؟

امروز دنبال این بودم که در قالب سایتی که با بوت استرپ(bootstrap) طراحی شده، ستون هایی که با کلاس col ایجاد شده اند رو هم ارتفاع کنم. چون می خواستم یک بک گراند رنگی بهشون بدم پایین ستون ها بالا و پایین میشد. مثل شکل زیر:

ستون های نا مرتب بوت استرپ

یک جستجو کردم تو اینترنت راه حل های css زیر رو پیدا کردم. امیدوارم به درد شما هم بخوره:

راه حل اول

.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.row{
overflow: hidden;
}

دمو

راه حل دوم

استفاده از

table

.row {
display: table;
}

.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

دمو

راه حل سوم

استفاده از

flex

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

دمو

منبع: How can I make Bootstrap columns all the same height?

امیدوارم این مطلب مورد استفاده شما قرار بگیرد. لطفاً دیدگاه خود را نسبت به این مطلب درج کنید.