Verktøy for layout

For raskere mobilvennlig og responsiv utvikling inkluderer Bootstrap dusinvis av verktøyklasser for å vise, skjule, justere og skille mellom innhold.

Endredisplay

Bruk visningsverktøyene våre for responsivt å veksle felles verdier for displayeiendommen. Bland det med rutenettsystemet vårt, innholdet eller komponentene for å vise eller skjule dem på tvers av bestemte visningsporter.

Flexbox-alternativer

Bootstrap 4 er bygget med flexbox, men ikke alle elementer displayhar blitt endret til display: flex, da dette vil legge til mange unødvendige overstyringer og uventet endre viktig nettleseratferd. De fleste av komponentene våre er bygget med flexbox aktivert.

Hvis du trenger å legge display: flextil et element, gjør det med .d-flexeller en av de responsive variantene (f.eks. .d-sm-flex). Du trenger denne klassen eller displayverdien for å tillate bruk av våre ekstra flexbox-verktøy for dimensjonering, justering, avstand og mer.

Margin og polstring

Bruk avstandsverktøyenemargin og til å kontrollere hvordan elementer og komponenter er fordelt og dimensjonert. Bootstrap 4 inkluderer en fem-nivå skala for avstandsverktøy, basert på en standardverdivariabel . Velg verdier for alle visningsporter (f.eks. for ), eller velg responsive varianter for å målrette mot spesifikke visningsporter (f.eks. for å starte ved bruddpunktet).padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd

Vekslevisibility

Når veksling displayikke er nødvendig, kan du veksle visibilitymellom et element med våre synlighetsverktøy . Usynlige elementer vil fortsatt påvirke layouten på siden, men er visuelt skjult for besøkende.