Суваг

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

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

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

Суваг нь хэвтээ padding. Бид багана тус бүр дээр ба тохируулж padding-right, агуулгыг зэрэгцүүлэхийн тулд мөр бүрийн эхлэл ба төгсгөлд сөрөг утгыг ашиглана.padding-leftmargin
1.5remСуваг нь ( 24px) өргөнөөс эхэлдэг . Энэ нь бидэнд сүлжээгээ дүүргэгч болон захын зайны масштабтай тааруулах боломжийг олгодог.
Сувагуудыг хариу үйлдэлтэйгээр тохируулах боломжтой. Хэвтээ суваг, босоо суваг болон бүх сувгийг өөрчлөхийн тулд таслах цэгийн тусгай сувгийн ангиудыг ашиглана уу.

Хэвтээ суваг

.gx-*ангиудыг хэвтээ сувгийн өргөнийг хянахад ашиглаж болно. Хүсээгүй халилтаас сэргийлэхийн тулд том суваг ашиглаж байгаа бол тохирох жийргэвчний хэрэгслийг ашиглан тохируулах .containerшаардлагатай . .container-fluidЖишээлбэл, дараах жишээн дээр бид дүүргэлтийг нэмэгдүүлсэн .px-4:

Тусгай баганын дүүргэлт

html

<div class="container px-4 text-center">
  <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:

Тусгай баганын дүүргэлт

html

<div class="container overflow-hidden text-center">
  <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:

Тусгай баганын дүүргэлт

html

<div class="container overflow-hidden text-center">
  <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боодлын анги нэмэх шаардлагагүй болно.

Тусгай баганын дүүргэлт

html

<div class="container text-center">
  <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>

Эгнээ баганын суваг шуудуу

Мөрний баганад суваг шуудууны ангиллыг нэмж болно . Дараах жишээнд бид хариу үйлдэл үзүүлэх мөрийн багана болон хариу үйлдэл үзүүлэх сувгийн ангиудыг ашигладаг.

Мөр багана

html

<div class="container text-center">
  <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нэмнэ .mx-0үү ..row

Практикт энэ нь хэрхэн харагдахыг эндээс харна уу. Та үүнийг бусад бүх урьдчилан тодорхойлсон сүлжээний ангиудад (баганын өргөн, хариу үйлдэл үзүүлэх түвшин, дахин эрэмбэлэх гэх мэт) ашиглах боломжтой гэдгийг анхаарна уу.

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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,
);