ღარები

ღრძილები არის ბალიშები თქვენს სვეტებს შორის, რომლებიც გამოიყენება 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. ეს ხსნის უარყოფით margins-ს .rowდა ჰორიზონტალურს paddingყველა უშუალო ბავშვების სვეტიდან.

გჭირდებათ დიზაინი კიდემდე? ჩამოაგდეს მშობელი .containerან .container-fluid.

პრაქტიკაში, აი, როგორ გამოიყურება. გაითვალისწინეთ, რომ შეგიძლიათ გააგრძელოთ მისი გამოყენება ყველა სხვა წინასწარ განსაზღვრული ბადის კლასებთან (მათ შორის სვეტების სიგანეები, საპასუხო დონეები, ხელახალი შეკვეთები და სხვა).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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>

შეცვალეთ ღარები

კლასები აგებულია $guttersSass რუქიდან, რომელიც მემკვიდრეობით არის მიღებული $spacersSass რუქიდან.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);