Rännor

Rännor är stoppningen mellan dina kolumner, som används för att på ett responsivt sätt rymma och anpassa innehåll i Bootstrap-rutnätssystemet.

På den här sidan

Hur de fungerar

Rännor är luckorna mellan kolumninnehåll, skapade av horisontella padding. Vi ställer in padding-rightoch padding-leftpå varje kolumn och använder negativ marginför att kompensera det i början och slutet av varje rad för att anpassa innehållet.
Rännor börjar vid 1.5rem( 24px) breda. Detta gör att vi kan matcha vårt rutnät till skalan för stoppning och marginaldistanser .
Rännor kan anpassas responsivt. Använd brytpunktsspecifika rännstensklasser för att modifiera horisontella rännor, vertikala rännor och alla rännor.

Horisontella hängrännor

.gx-*klasser kan användas för att styra de horisontella rännans bredder. Föräldern .containereller .container-fluidföräldern kan behöva justeras om större rännor också används för att undvika oönskat översvämning, med hjälp av ett matchande stoppningsverktyg. Till exempel, i följande exempel har vi ökat utfyllnaden med .px-4:

Anpassad kolumnstoppning

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>

En alternativ lösning är att lägga till ett omslag runt .rowmed .overflow-hiddenklassen:

Anpassad kolumnstoppning

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>

Vertikala hängrännor

.gy-*klasser kan användas för att styra de vertikala rännvidden inom en rad när kolumner lindas till nya linjer. Liksom de horisontella rännorna kan de vertikala rännorna orsaka visst överflöde under .rowslutet av en sida. Om detta inträffar lägger du till ett omslag .rowmed .overflow-hiddenklassen:

Anpassad kolumnstoppning

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>

Horisontella och vertikala hängrännor

.g-*klasser kan användas för att styra de horisontella rännans bredder, i följande exempel använder vi en mindre rännvidd, så det kommer inte att finnas ett behov av att lägga till .overflow-hiddenomslagsklassen.

Anpassad kolumnstoppning

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>

Rad kolumner rännor

Gränsklasser kan också läggas till i radkolumner . I följande exempel använder vi responsiva radkolumner och responsiva rännstensklasser.

Rad kolumn

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>

Inga hängrännor

Rännorna mellan kolumner i våra fördefinierade rutnätsklasser kan tas bort med .g-0. Detta tar bort negativa margins från .rowoch horisontella paddingfrån alla omedelbara underordnade kolumner.

Behöver du en kant-till-kant-design? Släpp föräldern .containereller .container-fluidoch lägg .mx-0till för .rowatt förhindra översvämning.

I praktiken ser det ut så här. Observera att du kan fortsätta att använda detta med alla andra fördefinierade rutnätsklasser (inklusive kolumnbredder, responsiva nivåer, ombeställningar och mer).

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

Byt rännorna

Klasser är byggda från $guttersSass-kartan som ärvs från $spacersSass-kartan.

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