গটারস
গুটারগুলি হল আপনার কলামগুলির মধ্যে প্যাডিং, যা বুটস্ট্র্যাপ গ্রিড সিস্টেমে প্রতিক্রিয়াশীলভাবে স্থান এবং সামগ্রী সারিবদ্ধ করতে ব্যবহৃত হয়।
তারা কিভাবে কাজ করে
-
অনুভূমিক দ্বারা তৈরি কলামের বিষয়বস্তুর মধ্যে ফাঁকগুলি হল গটার
padding
। আমরা প্রতিটি কলামেpadding-right
এবং সেট করি এবং বিষয়বস্তু সারিবদ্ধ করতে প্রতিটি সারির শুরুতে এবং শেষে অফসেট করতে নেতিবাচক ব্যবহার করি।padding-left
margin
-
গটারগুলি
1.5rem
(24px
) চওড়া থেকে শুরু হয়। এটি আমাদের গ্রিডকে প্যাডিং এবং মার্জিন স্পেসার স্কেলের সাথে মেলাতে দেয়। -
Gutters প্রতিক্রিয়াশীলভাবে সমন্বয় করা যেতে পারে. অনুভূমিক নর্দমা, উল্লম্ব নর্দমা, এবং সমস্ত নর্দমা সংশোধন করতে ব্রেকপয়েন্ট-নির্দিষ্ট নর্দমার ক্লাস ব্যবহার করুন।
অনুভূমিক নর্দমা
.gx-*
অনুভূমিক নর্দমার প্রস্থ নিয়ন্ত্রণ করতে ক্লাস ব্যবহার করা যেতে পারে। একটি ম্যাচিং প্যাডিং ইউটিলিটি ব্যবহার করে অবাঞ্ছিত ওভারফ্লো এড়াতে বড় নর্দমা ব্যবহার করা হলে বা অভিভাবককে সামঞ্জস্য করতে হতে পারে .container
। .container-fluid
উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণে আমরা এর সাথে প্যাডিং বাড়িয়েছি .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
.row
একটি বিকল্প সমাধান হল .overflow-hidden
ক্লাসের চারপাশে একটি মোড়ক যুক্ত করা :
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
উল্লম্ব নর্দমা
.gy-*
ক্লাসগুলি উল্লম্ব নর্দমার প্রস্থ নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। .row
অনুভূমিক নর্দমাগুলির মতো, উল্লম্ব নর্দমাগুলি একটি পৃষ্ঠার শেষে নীচে কিছু উপচে পড়তে পারে। যদি এটি ঘটে তবে আপনি ক্লাসের .row
সাথে একটি মোড়ক যুক্ত করুন:.overflow-hidden
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
অনুভূমিক এবং উল্লম্ব নর্দমা
.g-*
.overflow-hidden
অনুভূমিক নর্দমার প্রস্থ নিয়ন্ত্রণ করতে ক্লাসগুলি ব্যবহার করা যেতে পারে, নিম্নলিখিত উদাহরণের জন্য আমরা একটি ছোট নর্দমার প্রস্থ ব্যবহার করি, তাই র্যাপার ক্লাস যুক্ত করার প্রয়োজন হবে না ।
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
সারি সারি কলাম নর্দমা
সারি কলামগুলিতেও গটার ক্লাস যুক্ত করা যেতে পারে । নিম্নলিখিত উদাহরণে, আমরা প্রতিক্রিয়াশীল সারি কলাম এবং প্রতিক্রিয়াশীল গটার ক্লাস ব্যবহার করি।
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
নালা নেই
আমাদের পূর্বনির্ধারিত গ্রিড ক্লাসের কলামগুলির মধ্যে থাকা গটারগুলি দিয়ে সরানো যেতে পারে .g-0
৷ এটি সমস্ত তাৎক্ষণিক শিশু কলাম থেকে নেতিবাচক margin
গুলি .row
এবং অনুভূমিকগুলিকে সরিয়ে দেয়।padding
একটি প্রান্ত থেকে প্রান্ত নকশা প্রয়োজন? অভিভাবক .container
বা বাদ দিন .container-fluid
।
অনুশীলনে, এটি দেখতে কেমন তা এখানে। মনে রাখবেন আপনি এটিকে অন্যান্য পূর্বনির্ধারিত গ্রিড ক্লাসের সাথে ব্যবহার করা চালিয়ে যেতে পারেন (কলামের প্রস্থ, প্রতিক্রিয়াশীল স্তর, পুনঃক্রম এবং আরও অনেক কিছু সহ)।
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
নর্দমা পরিবর্তন করুন
ক্লাসগুলি সাস ম্যাপ থেকে তৈরি করা হয় $gutters
যা সাস ম্যাপ থেকে উত্তরাধিকারসূত্রে প্রাপ্ত $spacers
।
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);