in English

Суваг

Суваг нь Bootstrap сүлжээний систем дэх агуулгыг хариу үйлдэлтэйгээр зайлах, зэрэгцүүлэхэд ашигладаг таны баганын хоорондох дэвсгэр юм.

Энэ хуудсан дээр

Тэд хэрхэн ажилладаг

Суваг нь хэвтээ padding. Бид багана тус бүр дээр ба тохируулж padding-right, агуулгыг зэрэгцүүлэхийн тулд мөр бүрийн эхлэл ба төгсгөлд сөрөг утгыг ашиглана.padding-leftmargin
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>

Сувагуудыг солих

Ангиудыг $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,
);