پرسش
حذف padding و gutter از ستون های گرید در بوت استرپ ۴ و ۵
Removing padding and gutter from grid columns in Bootstrap 4/5
سلام من دارم با بوت استرپ ۴ و ۵ کار میکنم و میخوام padding و gutter پیش‌فرض ستون های گرید رو حذف کنم. چطور میتونم این کار رو انجام بدم؟
1403/06/02
پاسخ
مهرشاد براتی
برنامه نویس فول استک وب ،موبایل ،دستکاپ ،کارشناس ارشد مهندسی کامپیوتر نرم افزار
سلام برای حذف padding و gutter از ستون های گرید باید بدونی gutter به صورت پیش‌فرض 1.5rem در نظر گرفته شدن، که میتونی این مقدار رو با استفاده از کلاس‌های g-0 (برای حذف gutter به طور کامل) تغییر بدی.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Grid Example</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row g-0"> <!-- Remove gutters --> <div class="col-6"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column 2</div> </div> </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> </body> </html>
تو این مثال، از کلاس g-0 تو row استفاده شده تا gutter کاملا حذف بشه. این کلاس از بوت استرپ برای کنترل فاصله بین ستون ها استفاده میشه.
اگر فقط میخوای پدینگ داخلی ستون ها رو حذف کنی، میتونی از کلاس‌های p-0 برای حذف پدینگ استفاده کنی
پاسخ: 1403/06/02
آخرین آپدیت: 1403/07/28