in English

Latakai

Latakai yra užpildas tarp stulpelių, naudojamas norint greitai išdėstyti ir suderinti turinį Bootstrap tinklelio sistemoje.

Šiame puslapyje

Kaip jie veikia

Latakai yra tarpai tarp stulpelių turinio, sukurti horizontalia padding. Kiekviename stulpelyje nustatome padding-rightir , o kiekvienos eilutės pradžioje ir pabaigoje padding-leftnaudojame neigiamą marginreikšmę, kad sulygiuotume turinį.
Latakai prasideda nuo 1.5rem( 24px) pločio. Tai leidžia tinklelį suderinti su užpildo ir paraščių tarpiklių skale.
Latakai gali būti reguliuojami pagal poreikį. Norėdami modifikuoti horizontalius, vertikalius latakus ir visus latakus, naudokite lūžio taškams būdingas latakų klases.

Horizontalūs latakai

.gx-*klasės gali būti naudojamos horizontaliems latakų pločiams valdyti. Jei taip pat naudojami didesni latakai, kad būtų išvengta nepageidaujamo perpildymo, gali tekti pakoreguoti .containerarba pagrindinį lataką, naudojant atitinkamą užpildymo priemonę. .container-fluidPavyzdžiui, šiame pavyzdyje padidinome užpildymą .px-4:

Pasirinktinis stulpelio užpildymas

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>

Alternatyvus sprendimas yra pridėti apvyniojimą aplink .rowsu .overflow-hiddenklase:

Pasirinktinis stulpelio užpildymas

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>

Vertikalūs latakai

.gy-*klasės gali būti naudojamos vertikaliam latako pločiui valdyti eilutėje, kai stulpeliai pereina į naujas linijas. Kaip ir horizontalūs latakai, vertikalūs latakai gali sukelti perpildymą žemiau .rowpuslapio pabaigoje. .rowJei taip nutinka, kartu su .overflow-hiddenklase pridedate įvyniojimą :

Pasirinktinis stulpelio užpildymas

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>

Horizontalūs ir vertikalūs latakai

.g-*klasės gali būti naudojamos horizontaliems latako pločiams valdyti, toliau pateiktame pavyzdyje naudojame mažesnį latakų plotį, todėl nereikės pridėti .overflow-hiddenapvyniojimo klasės.

Pasirinktinis stulpelio užpildymas

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>

Eilučių kolonų latakai

Latakų klases taip pat galima įtraukti į eilučių stulpelius . Toliau pateiktame pavyzdyje naudojame reaguojančius eilučių stulpelius ir reaguojančias latakų klases.

Eilute stulpelis

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>

Jokių latakų

Latakai tarp stulpelių mūsų iš anksto nustatytose tinklelio klasėse gali būti pašalinti naudojant .g-0. Taip pašalinami neigiami margins iš visų tiesioginių antrinių stulpelių .rowir horizontalūs .padding

Reikia dizaino nuo krašto iki krašto? Nuleiskite tėvą .containerarba .container-fluidir pridėkite .mx-0prie, .rowkad išvengtumėte perpildymo.

Praktiškai tai atrodo taip. Atminkite, kad galite ir toliau tai naudoti su visomis kitomis iš anksto nustatytomis tinklelio klasėmis (įskaitant stulpelių plotį, reaguojančius lygius, pertvarkymus ir kt.).

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

Pakeiskite latakus

Klasės sudaromos iš $guttersSass žemėlapio, kuris yra paveldėtas iš $spacersSass žemėlapio.

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