پرسش

چطور میتونم با بوت استرپ 5 پنج ستون با عرض مساوی بسازم؟

Five Equal Columns in Twitter Bootstrap

سلام
من در حال کار بر روی پروژه‌ای با بوت استرپ 5 هستم و نیاز دارم پنج ستون با عرض مساوی در یک ردیف داشته باشم. می‌خواستم بدونم بهترین راه برای انجام این کار چیه؟

#bootstrap

1403/05/30

پاسخ

مهرشاد براتی

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

سلام برای ایجاد پنج ستون با عرض مساوی تو بوت استرپ 5، می‌تونی از سیستم گرید بوت استرپ استفاده کنی. بوت استرپ 5 به شما این امکان رو میده که به راحتی ستون‌ ها رو به نسبت دلخواه تنظیم کنی.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Five Equal Columns</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">Column 1</div>
            <div class="col">Column 2</div>
            <div class="col">Column 3</div>
            <div class="col">Column 4</div>
            <div class="col">Column 5</div>
        </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

تو کد بالا، col به طور پیش‌فرض برای ستون‌ها عرض مساوی در نظر می‌گیره. وقتی چندین col رو در یک row قرار میدی، بوت استرپ به طور خودکار هر ستون رو به عرض مساوی تقسیم می‌کنه.

این روش ساده و موثره و نیازی به استفاده از CSS اضافی یا کدهای پیچیده نداره. فقط کافیه از کلاس col برای هر ستون استفاده کنی و بوت استرپ خودش عرض‌ها رو به صورت مساوی تقسیم می‌کنه.

پاسخ: 1403/05/30

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