Verktøy for layout
For raskere mobilvennlig og responsiv utvikling inkluderer Bootstrap dusinvis av verktøyklasser for å vise, skjule, justere og skille mellom innhold.
Bruk visningsverktøyene våre for responsivt å veksle felles verdier for display
eiendommen. Bland det med rutenettsystemet vårt, innholdet eller komponentene for å vise eller skjule dem på tvers av bestemte visningsporter.
Bootstrap 4 er bygget med flexbox, men ikke alle elementer display
har 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: flex
til et element, gjør det med .d-flex
eller en av de responsive variantene (f.eks. .d-sm-flex
). Du trenger denne klassen eller display
verdien for å tillate bruk av våre ekstra flexbox-verktøy for dimensjonering, justering, avstand og mer.
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-3
margin-right: 1rem
.mr-md-3
margin-right: 1rem
md
Når veksling display
ikke er nødvendig, kan du veksle visibility
mellom et element med våre synlighetsverktøy . Usynlige elementer vil fortsatt påvirke layouten på siden, men er visuelt skjult for besøkende.