06/12/2022
Bootstrap 5 er et af de mest populære front-end frameworks, der giver udviklere mulighed for hurtigt og effektivt at skabe responsive og visuelt tiltalende hjemmesider. En af de centrale aspekter af Bootstrap's grid-system er håndteringen af mellemrummet mellem kolonner, kendt som "gutters". Disse mellemrum er afgørende for at skabe et rent, organiseret og professionelt layout. I denne artikel vil vi dykke ned i, hvad "gutters" er i Bootstrap 5, hvordan de fungerer, og hvordan du kan tilpasse dem præcist til dine behov.
Hvad er "Gutters" i Bootstrap 5?
I Bootstrap 5 refererer "gutters" til den polstring eller det mellemrum, der eksisterer mellem kolonnerne i grid-systemet. Disse mellemrum skabes ved at anvende polstring på højre og venstre side af hver kolonne og derefter bruge negative marginer i starten og slutningen af hver række for at sikre, at indholdet flugter korrekt. "Gutters" er essentielle for at undgå, at indhold i tilstødende kolonner rører hinanden direkte, hvilket forbedrer læsbarheden og den overordnede æstetik.
Standard "gutter"-bredden i Bootstrap 5 er 1.5rem (24px). Denne standardværdi sikrer en god balance mellem mellemrum og udnyttelse af pladsen. Bootstrap 5 giver dog fleksibilitet til at tilpasse disse "gutters" enten ved at ændre deres bredde eller ved helt at fjerne dem.
Hvordan Fungerer "Gutters"?
Mellemrummet, eller "gutters", skabes primært gennem horisontal polstring på hver kolonne. For at opretholde en jævn linje i rækken, anvender Bootstrap negative marginer i starten og slutningen af .row-elementet. Disse negative marginer modvirker den polstring, der er tilføjet til de enkelte kolonner, hvilket sikrer, at rækken forbliver flugtet med dens container.
Forestil dig en .row med to .col elementer. Hver .col får padding-left og padding-right. Uden noget andet ville dette skabe et mellemrum mellem kolonnerne, men rækken ville potentielt overlappe dens container på siderne. For at forhindre dette tilføjes en negativ margin-left og margin-right til selve .row-elementet, som præcis modvirker den samlede horisontale polstring fra kolonnerne.
Tilpasning af "Gutters" med Utility Classes
Bootstrap 5 introducerer et kraftfuldt sæt af utility classes, der giver dig finmasket kontrol over dine "gutters". Disse klasser gør det nemt at justere mellemrummene responsivt på tværs af forskellige skærmstørrelser.
Kontrol af Horisontale "Gutters"
For at styre mellemrummet mellem kolonnerne horisontalt, kan du bruge .gx- klasserne. Disse klasser påvirker kun polstringen på venstre og højre side af kolonnerne.
Tilgængelige størrelser for .gx-:
.gx-0: Ingen horisontal polstring..gx-1: 0.25rem (4px) horisontal polstring..gx-2: 0.5rem (8px) horisontal polstring..gx-3: 1rem (16px) horisontal polstring..gx-4: 1.5rem (24px) horisontal polstring (standard)..gx-5: 3rem (48px) horisontal polstring.
Eksempel på brug af .gx-:
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Kolonne 1</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne 2</div> </div> </div> </div>Bemærk: Når du bruger større horisontale "gutters" (f.eks. .gx-5), kan det være nødvendigt at justere polstringen på containeren (f.eks. med .px-4) for at undgå uønsket overlap.
Kontrol af Vertikale "Gutters"
For at styre mellemrummet mellem rækkerne vertikalt, bruger du .gy- klasserne. Disse klasser påvirker polstringen på toppen og bunden af kolonnerne.
Tilgængelige størrelser for .gy-:
.gy-0: Ingen vertikal polstring..gy-1: 0.25rem (4px) vertikal polstring..gy-2: 0.5rem (8px) vertikal polstring..gy-3: 1rem (16px) vertikal polstring..gy-4: 1.5rem (24px) vertikal polstring (standard)..gy-5: 3rem (48px) vertikal polstring.
Eksempel på brug af .gy-:
<div class="container overflow-hidden"> <div class="row gy-5"> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 1</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 2</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 3</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 4</div> </div> </div> </div>Bemærk: Ligesom med horisontale "gutters" kan vertikale "gutters" forårsage overlap, især hvis de er store. Brug af .overflow-hidden på .row's wrapper kan hjælpe med at håndtere dette.
Kontrol af Både Horisontale og Vertikale "Gutters"
Du kan styre både horisontale og vertikale "gutters" samtidigt ved at bruge .g- klasserne. Disse klasser anvender den angivne størrelse på både .gx og .gy.
Tilgængelige størrelser for .g-: De samme størrelser som for .gx og .gy gælder her.
Eksempel på brug af .g-:
<div class="container"> <div class="row g-2"> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 1</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 2</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 3</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Kolonne 4</div> </div> </div> </div>Responsiv Kontrol af "Gutters"
Bootstrap 5's styrke ligger i dets responsive designprincipper. Du kan anvende forskellige "gutter"-størrelser på forskellige skærmstørrelser ved at kombinere breakpoint-præfikser med "gutter"-klasserne. For eksempel kan du bruge .g-3 for små skærme og .g-md-5 for medium skærme og større.
Eksempel på responsiv "gutter"-kontrol:
<div class="container"> <div class="row g-3 g-md-5"> <div class="col"> <div class="p-3 border bg-info text-white">Kolonne 1</div> </div> <div class="col"> <div class="p-3 border bg-warning text-white">Kolonne 2</div> </div> </div> </div>I dette eksempel vil "gutters" være 1rem (16px) på små skærme (under medium) og skifte til 3rem (48px) på medium skærme og derover.
Fjernelse af "Gutters" (No Gutters)
I nogle designscenarier ønsker du måske at fjerne alle mellemrum mellem kolonnerne for at opnå et "edge-to-edge" look. Dette gøres ved at tilføje klassen .g-0 til .row-elementet.
.g-0 fjerner al horisontal og vertikal polstring fra kolonnerne og annullerer de negative marginer på rækken.
Eksempel på fjernelse af "gutters":
<div class="container"> <div class="row g-0"> <div class="col-sm-6 col-md-8"> <div class="p-3 border bg-primary text-white">.col-sm-6 .col-md-8</div> </div> <div class="col-6 col-md-4"> <div class="p-3 border bg-secondary text-white">.col-6 .col-md-4</div> </div> </div> </div>Hvis du ønsker et fuldstændigt "edge-to-edge" design uden nogen form for padding fra containeren, kan du også fjerne .container eller .container-fluid klassen.
"Gutters" med Row Columns
Du kan også anvende "gutter"-klasserne direkte på rækker, der bruger responsive row columns (f.eks. .row-cols-). Dette giver dig mulighed for at styre mellemrummet, selv når antallet af kolonner ændrer sig baseret på skærmstørrelsen.
Eksempel med Row Columns og "Gutters":
<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">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> <div class="col"> <div class="p-3 border bg-light">Kolonne</div> </div> </div> </div>Opsummering af "Gutter" Kontrolmuligheder
Her er en hurtig oversigt over de vigtigste "gutter"-klasser i Bootstrap 5:
.g-{size}: Kontrollerer både vertikale og horisontale "gutters"..gx-{size}: Kontrollerer kun horisontale "gutters"..gy-{size}: Kontrollerer kun vertikale "gutters"..g-0: Fjerner alle "gutters".- Responsiv Kontrol: Brug
.g-{breakpoint}-{size},.gx-{breakpoint}-{size}, eller.gy-{breakpoint}-{size}for at anvende "gutters" forskelligt på forskellige skærmstørrelser (f.eks..g-md-3).
Konklusion
Forståelse og effektiv brug af "gutters" i Bootstrap 5 er afgørende for at skabe velstrukturerede og professionelt udseende websteder. Med de fleksible utility classes, der tilbydes af Bootstrap 5, har du fuld kontrol over mellemrummet mellem dine kolonner, hvilket giver dig mulighed for at skabe præcis det layout, du ønsker, uanset enhedens skærmstørrelse. Uanset om du har brug for standard mellemrum, større afstande eller helt vil fjerne "gutters", giver Bootstrap 5 dig værktøjerne til at opnå det med lethed.
Ofte Stillede Spørgsmål (FAQ)
Hvad er standard "gutter"-størrelsen i Bootstrap 5?
Standard "gutter"-størrelsen i Bootstrap 5 er 1.5rem (24px) for både horisontale og vertikale mellemrum.
Hvordan fjerner jeg "gutters" helt?
Du kan fjerne alle "gutters" ved at tilføje klassen .g-0 til dit .row-element.
Kan jeg anvende forskellige "gutter"-størrelser på forskellige skærmstørrelser?
Ja, det kan du. Brug responsive "gutter"-klasser som .g-md-3, .gx-lg-4 osv., hvor md eller lg angiver breakpointet (medium eller large skærme).
Hvad er forskellen på .g-, .gx- og .gy-?
.g- kontrollerer både horisontale og vertikale "gutters". .gx- kontrollerer kun de horisontale mellemrum mellem kolonner, mens .gy- kontrollerer de vertikale mellemrum mellem rækker af kolonner.
Hvis du vil læse andre artikler, der ligner Bootstrap 5: Styr dine gitter-mellemrum, kan du besøge kategorien Teknologi.