Ulluqe

Ulluqet janë mbushja midis kolonave tuaja, të përdorura për të vendosur hapësirën dhe përafrimin e përmbajtjes në mënyrë të përgjegjshme në sistemin e rrjetit Bootstrap.

Në këtë faqe

Si funksionojnë

Ulluqet janë boshllëqet midis përmbajtjes së kolonës, të krijuara nga horizontale padding. Ne vendosim padding-rightdhe padding-leftnë secilën kolonë dhe përdorim negativ marginpër të kompensuar atë në fillim dhe në fund të çdo rreshti për të lidhur përmbajtjen.
Ulluqet fillojnë në 1.5rem( 24px) të gjerë. Kjo na lejon të përputhemi me rrjetin tonë me shkallën e mbushjes dhe ndarjes së kufirit .
Ulluqet mund të rregullohen në mënyrë të përgjegjshme. Përdorni klasa të ulluqeve specifike për pikën e ndërprerjes për të modifikuar ulluqet horizontale, ulluqet vertikale dhe të gjitha ulluqet.

Ulluqe horizontale

.gx-*klasat mund të përdoren për të kontrolluar gjerësinë horizontale të ulluqeve. Prindi .containerose .container-fluidprindi mund të kenë nevojë të rregullohen nëse përdoren gjithashtu ulluqe më të mëdha për të shmangur tejmbushjen e padëshiruar, duke përdorur një mjet të përshtatshëm mbushjeje. Për shembull, në shembullin e mëposhtëm ne kemi rritur mbushjen me .px-4:

Mbushje e personalizuar e kolonës

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>

Një zgjidhje alternative është të shtoni një mbështjellës rreth .rowklasës .overflow-hidden:

Mbushje e personalizuar e kolonës

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>

Ulluqe vertikale

.gy-*klasat mund të përdoren për të kontrolluar gjerësinë vertikale të ulluqeve brenda një rreshti kur kolonat mbështillen në vija të reja. Ashtu si ulluqet horizontale, ulluqet vertikale mund të shkaktojnë një tejmbushje poshtë ulluqeve .rownë fund të faqes. Nëse kjo ndodh, ju shtoni një mbështjellës .rowme .overflow-hiddenklasën:

Mbushje e personalizuar e kolonës

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>

Ulluqe horizontale dhe vertikale

.g-*klasat mund të përdoren për të kontrolluar gjerësinë e ulluqeve horizontale, për shembullin e mëposhtëm ne përdorim një gjerësi më të vogël të ulluqit, kështu që nuk do të ketë nevojë të shtojmë .overflow-hiddenklasën e mbështjellësit.

Mbushje e personalizuar e kolonës

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>

Kolonat e rreshtave ulluqe

Klasat e ulluqeve gjithashtu mund të shtohen në kolonat e rreshtave . Në shembullin e mëposhtëm, ne përdorim kolona rreshtash të përgjegjshme dhe klasa ulluqe reaguese.

Kolona e rreshtit

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>

Nuk ka ulluqe

Ulluqet midis kolonave në klasat tona të paracaktuara të rrjetit mund të hiqen me .g-0. Kjo heq margins negative nga .rowdhe horizontale paddingnga të gjitha kolonat e fëmijëve të afërt.

Keni nevojë për një dizajn nga skaji në skaj? Hidhni prindin .containerose .container-fluiddhe shtoni .mx-0në .rowpër të parandaluar tejmbushjen.

Në praktikë, ja se si duket. Vini re se mund të vazhdoni ta përdorni këtë me të gjitha klasat e tjera të paracaktuara të rrjetit (përfshirë gjerësinë e kolonave, nivelet e përgjegjshme, rirenditjet dhe më shumë).

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

Ndryshoni ulluqet

Klasat ndërtohen nga $guttersharta Sass e cila është trashëguar nga $spacersharta Sass.

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