Διάστημα

Το Bootstrap περιλαμβάνει μια ευρεία γκάμα κλάσεων βοηθητικών περιθωρίων και συμπληρωμάτων που ανταποκρίνονται σε συντομογραφία για την τροποποίηση της εμφάνισης ενός στοιχείου.

Πως δουλεύει

Εκχωρήστε φιλικές προς απόκριση marginή paddingτιμές σε ένα στοιχείο ή ένα υποσύνολο των πλευρών του με τάξεις στενογραφίας. Περιλαμβάνει υποστήριξη για μεμονωμένες ιδιότητες, όλες τις ιδιοκτησίες και κάθετες και οριζόντιες ιδιότητες. Οι κλάσεις δημιουργούνται από έναν προεπιλεγμένο χάρτη Sass που κυμαίνεται από .25remέως 3rem.

Σημειογραφία

Τα βοηθητικά προγράμματα Spacing που ισχύουν για όλα τα σημεία διακοπής, από xsέως xl, δεν έχουν συντομογραφία σημείου διακοπής. Αυτό συμβαίνει επειδή αυτές οι κλάσεις εφαρμόζονται από min-width: 0και πάνω, και επομένως δεν δεσμεύονται από ένα ερώτημα μέσων. Τα υπόλοιπα σημεία διακοπής, ωστόσο, περιλαμβάνουν μια συντομογραφία σημείου διακοπής.

Οι κλάσεις ονομάζονται χρησιμοποιώντας τη μορφή {property}{sides}-{size}για xsκαι {property}{sides}-{breakpoint}-{size}για sm, md, lgκαι xl.

Όπου το ακίνητο είναι ένα από:

m- για τάξεις που σετmargin
p- για τάξεις που σετpadding

Όπου οι πλευρές είναι μία από:

t- για τάξεις που ορίζουν margin-topήpadding-top
b- για τάξεις που ορίζουν margin-bottomήpadding-bottom
l- για τάξεις που ορίζουν margin-leftήpadding-left
r- για τάξεις που ορίζουν margin-rightήpadding-right
x- για τάξεις που ορίζουν και τα δύο *-leftκαι*-right
y- για τάξεις που ορίζουν και τα δύο *-topκαι*-bottom
κενό - για κλάσεις που ορίζουν ένα marginή και paddingστις 4 πλευρές του στοιχείου

Όπου το μέγεθος είναι ένα από:

0- για τάξεις που εξαλείφουν το marginή paddingρυθμίζοντας το σε0
1- (από προεπιλογή) για κλάσεις που ορίζουν το marginή το paddingσε$spacer * .25
2- (από προεπιλογή) για κλάσεις που ορίζουν το marginή το paddingσε$spacer * .5
3- (από προεπιλογή) για κλάσεις που ορίζουν το marginή το paddingσε$spacer
4- (από προεπιλογή) για κλάσεις που ορίζουν το marginή το paddingσε$spacer * 1.5
5- (από προεπιλογή) για κλάσεις που ορίζουν το marginή το paddingσε$spacer * 3
auto- για τάξεις που ορίζουν το marginσε auto

(Μπορείτε να προσθέσετε περισσότερα μεγέθη προσθέτοντας καταχωρίσεις στη $spacersμεταβλητή χάρτη Sass.)

Παραδείγματα

Ακολουθούν μερικά αντιπροσωπευτικά παραδείγματα αυτών των τάξεων:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Οριζόντιο κεντράρισμα

Επιπλέον, το Bootstrap περιλαμβάνει επίσης μια .mx-autoκλάση για το οριζόντιο κεντράρισμα περιεχομένου σε επίπεδο μπλοκ σταθερού πλάτους —δηλαδή περιεχόμενο που έχει display: blockκαι ένα widthσύνολο— ορίζοντας τα οριζόντια περιθώρια σε auto.

Στοιχείο στο κέντρο

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Αρνητικό περιθώριο

Στο CSS, marginοι ιδιότητες μπορούν να χρησιμοποιούν αρνητικές τιμές ( paddingδεν μπορεί). Από την 4.2, έχουμε προσθέσει βοηθητικά προγράμματα αρνητικού περιθωρίου για κάθε μη μηδενικό ακέραιο μέγεθος που αναφέρεται παραπάνω (π.χ., 1, 2, , 3, 4, 5). Αυτά τα βοηθητικά προγράμματα είναι ιδανικά για την προσαρμογή των υδρορροών στηλών πλέγματος σε σημεία διακοπής.

Η σύνταξη είναι σχεδόν ίδια με τα προεπιλεγμένα βοηθητικά προγράμματα θετικού περιθωρίου, αλλά με την προσθήκη nπριν από το ζητούμενο μέγεθος. Ακολουθεί ένα παράδειγμα κλάσης που είναι το αντίθετο από .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

mdΑκολουθεί ένα παράδειγμα προσαρμογής του πλέγματος Bootstrap στο σημείο διακοπής μέσου ( ) και άνω. Αυξήσαμε το .colpadding με .px-md-5και, στη συνέχεια, το αντιμετωπίσαμε με .mx-md-n5το γονικό .row.

Προσαρμοσμένη επένδυση στηλών

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>