پرسش

چطور میشه ارتفاع همه‌ ستون‌ هامو تو Bootstrap ( بوت استرپ ) یک اندازه کنم

How can I make Bootstrap columns all the same height?

سلام چطور میتونم ارتفاع همه‌ ستون‌های Bootstrap رو به یک اندازه در بیارم ، می‌خوام که تمام ستون‌های من با ارتفاع‌ های متفاوت همشون به ارتفاع یه جور در ییاد

#bootstrap

1403/05/30

پاسخ

مهرشاد براتی

بیوگرافی مهرشاد براتی

سلام برای این‌که ارتفاع همه‌ ی ستون‌ها یکسان بشه، می‌تونی از Flexbox استفاده کنی این روش خیلی ساده اس

اول از همه مطمئن شو که کلاس‌های d-flex و align-items-stretch رو به ردیف‌های خودت اضافه کردی این کار باعث میشه که ستون‌ها توی ردیف به صورت خودکار ارتفاعشون رو برابر کنن

<div class="container">
  <div class="row d-flex align-items-stretch">
    <div class="col-md-4">
      <div class="box">Content 1</div>
    </div>
    <div class="col-md-4">
      <div class="box">Content 2</div>
    </div>
    <div class="col-md-4">
      <div class="box">Content 3</div>
    </div>
  </div>
</div>

اگر نیاز به تنظیم دقیق‌تری داشتی می‌تونی از CSS هم استفاده کنی

.columns {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

این کد CSS باعث میشه که محتویات داخل ستون ها به‌طور مساوی ارتفاعشون یکسان بشه

پاسخ: 1403/05/30

آخرین آپدیت: 1403/07/14