ღარები
ღრძილები არის ბალიშები თქვენს სვეტებს შორის, რომლებიც გამოიყენება Bootstrap ქსელის სისტემაში შინაარსის საპასუხოდ განლაგებისა და გასწორებისთვის.
როგორ მუშაობენ
-
ღარები არის უფსკრული სვეტების შინაარსს შორის, შექმნილი ჰორიზონტალური
padding
. ჩვენ ვაყენებთpadding-right
დაpadding-left
თითოეულ სვეტზე და ვიყენებთ უარყოფითსmargin
, რათა გადავწყვიტოთ ეს ყოველი მწკრივის დასაწყისში და ბოლოს, შინაარსის გასასწორებლად. -
ღარები იწყება
1.5rem
(24px
) სიგანეზე. ეს საშუალებას გვაძლევს დავამთხვიოთ ჩვენი ბადე ბალიშებისა და ზღვრების სპასერების მასშტაბთან. -
ღრძილების რეგულირება შესაძლებელია საპასუხოდ. გამოიყენეთ წყვეტის წერტილის სპეციფიკური ღრძილების კლასები ჰორიზონტალური ღარები, ვერტიკალური ღარები და ყველა ღარები.
ჰორიზონტალური ღარები
.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
s-ს .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
Sass რუქიდან, რომელიც მემკვიდრეობით არის მიღებული $spacers
Sass რუქიდან.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);