امروز دنبال این بودم که در قالب سایتی که با بوت استرپ(bootstrap) طراحی شده، ستون هایی که با کلاس col ایجاد شده اند رو هم ارتفاع کنم. چون می خواستم یک بک گراند رنگی بهشون بدم پایین ستون ها بالا و پایین میشد. مثل شکل زیر:
یک جستجو کردم تو اینترنت راه حل های css زیر رو پیدا کردم. امیدوارم به درد شما هم بخوره:
راه حل اول
|
.row [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; } .row{ |
دمو |
راه حل دوم استفاده از table |
.row { display: table; } .row [class*="col-"] { |
دمو |
راه حل سوم استفاده از 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?
امیدوارم این مطلب مورد استفاده شما قرار بگیرد. لطفاً دیدگاه خود را نسبت به این مطلب درج کنید.
ارسال کردن دیدگاه جدید