Hvorfor bruker bootstrap negative marginer?
Hvorfor bruker bootstrap negative marginer?

Video: Hvorfor bruker bootstrap negative marginer?

Video: Hvorfor bruker bootstrap negative marginer?
Video: Anthony Metivier: Increasing Your Memory & IQ 2024, November
Anonim

Rader har en negativ venstre høyre margin på -15 piksler. Container-polstringen på 15px brukes til å motvirke negative marginer av raden. Dette er for å holde innholdet jevnt på kantene av oppsettet. Hvis du ikke legger en rad i en beholder, vil raden flyte over beholderen, noe som forårsaker en uønsket horisontal rulling.

I forhold til dette, hvorfor har bootstrap-raden negativ margin?

I alt Nett systemer, er det takrenner mellom hver søyle. siste klasse på disse kolonnene som noen Nett systemer gjør, setter de i stedet. rad klasse å ha negative marginer som samsvarer med polstringen til søylene. Dette "trekker" takrennene av den første og siste søylen, samtidig som den gjør den bredere.

Videre, hvordan sentrerer jeg en div i bootstrap 4? 1 - Vertikal Senter Bruke automatiske marger En måte å vertikalt senter er å bruke my-auto. Dette vil senter de element i dens flexbox container (De Bootstrap 4 . rad er display:flex). For eksempel gjør h-100 raden i full høyde, og my-auto vil vertikalt senter kolonnen col-sm-12.

Så, hvordan setter jeg marginer i bootstrap?

t - sett margin -topp eller polstring-topp. b - sett margin -bunn eller polstring-bunn. l - sett margin -venstre eller polstring-venstre. r - setter margin -høyre eller polstring-høyre.

Flere mellomromseksempler.

.m-# / m-*-# margin på alle sider Prøv det
.store min-*-# marg topp og bunn Prøv det
.p-# / p-*-# polstring på alle sider Prøv det

Hva er bootstrap-bruddpunktene?

Mottakelig bruddpunkter Disse bruddpunkter er for det meste basert på minimum viewport-bredder og lar oss skalere opp elementer etter hvert som viewporten endres. Støvelhempe bruker primært følgende mediespørringsområder - eller bruddpunkter -i våre kilde Sass-filer for layout, rutenettsystem og komponenter.

Anbefalt: