Σύστημα πλέγματος

Χρησιμοποιήστε το πανίσχυρο πλέγμα flexbox του mobile-first για να δημιουργήσετε διατάξεις όλων των σχημάτων και μεγεθών χάρη σε ένα σύστημα δώδεκα στηλών, πέντε προεπιλεγμένα αποκρινόμενα επίπεδα, μεταβλητές Sass και mixins και δεκάδες προκαθορισμένες κλάσεις.

Πως δουλεύει

Το σύστημα πλέγματος του Bootstrap χρησιμοποιεί μια σειρά από κοντέινερ, σειρές και στήλες για τη διάταξη και τη στοίχιση περιεχομένου. Είναι κατασκευασμένο με flexbox και έχει πλήρη απόκριση. Ακολουθεί ένα παράδειγμα και μια εις βάθος ματιά στο πώς συνδυάζεται το πλέγμα.

Νέος ή μη εξοικειωμένος με το flexbox; Διαβάστε αυτόν τον οδηγό flexbox CSS Tricks για φόντο, ορολογία, οδηγίες και αποσπάσματα κώδικα.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Το παραπάνω παράδειγμα δημιουργεί τρεις στήλες ίσου πλάτους σε μικρές, μεσαίες, μεγάλες και πολύ μεγάλες συσκευές χρησιμοποιώντας τις προκαθορισμένες κατηγορίες πλέγματος μας. Αυτές οι στήλες είναι κεντραρισμένες στη σελίδα με το γονικό .container.

Αναλύοντας το, δείτε πώς λειτουργεί:

• Τα κοντέινερ παρέχουν ένα μέσο για να κεντράρετε και να τοποθετήσετε οριζόντια τα περιεχόμενα του ιστότοπού σας. Χρησιμοποιήστε .containerτο για εύρος pixel με απόκριση ή .container-fluidγια width: 100%όλα τα μεγέθη θυρών προβολής και συσκευών.
• Οι σειρές είναι περιτυλίγματα για στήλες. Κάθε στήλη έχει οριζόντια padding(που ονομάζεται υδρορροή) για τον έλεγχο του χώρου μεταξύ τους. Αυτό paddingστη συνέχεια αντισταθμίζεται στις σειρές με αρνητικά περιθώρια. Με αυτόν τον τρόπο, όλο το περιεχόμενο στις στήλες σας ευθυγραμμίζεται οπτικά προς τα κάτω στην αριστερή πλευρά.
• Σε μια διάταξη πλέγματος, το περιεχόμενο πρέπει να τοποθετείται μέσα σε στήλες και μόνο οι στήλες μπορούν να είναι αμέσως παιδιά των σειρών.
• Χάρη στο flexbox, οι στήλες πλέγματος χωρίς καθορισμένο widthθα τοποθετηθούν αυτόματα ως στήλες ίσου πλάτους. Για παράδειγμα, τέσσερις περιπτώσεις .col-smθα έχουν αυτόματα πλάτος 25% από το μικρό σημείο διακοπής και πάνω. Δείτε την ενότητα στηλών αυτόματης διάταξης για περισσότερα παραδείγματα.
• Οι κατηγορίες στηλών υποδεικνύουν τον αριθμό των στηλών που θέλετε να χρησιμοποιήσετε από τις πιθανές 12 ανά σειρά. Επομένως, εάν θέλετε τρεις στήλες ίσου πλάτους, μπορείτε να χρησιμοποιήσετε το .col-4.
• Οι στήλες widths ορίζονται σε ποσοστά, επομένως είναι πάντα ρευστά και έχουν μέγεθος σε σχέση με το μητρικό τους στοιχείο.
• Οι στήλες έχουν οριζόντια paddingγια τη δημιουργία των υδρορροών μεταξύ μεμονωμένων στηλών, ωστόσο, μπορείτε να αφαιρέσετε το marginαπό τις σειρές και paddingαπό τις στήλες με .no-guttersτο .row.
• Για να ανταποκρίνεται το πλέγμα, υπάρχουν πέντε σημεία διακοπής πλέγματος, ένα για κάθε σημείο διακοπής απόκρισης : όλα τα σημεία διακοπής (εξαιρετικά μικρά), μικρά, μεσαία, μεγάλα και εξαιρετικά μεγάλα.
• Τα σημεία διακοπής πλέγματος βασίζονται σε ερωτήματα μέσων ελάχιστου πλάτους, που σημαίνει ότι ισχύουν σε αυτό το ένα σημείο διακοπής και σε όλα αυτά που βρίσκονται πάνω από αυτό (π.χ. .col-sm-4ισχύει για μικρές, μεσαίες, μεγάλες και πολύ μεγάλες συσκευές, αλλά όχι για το πρώτο xsσημείο διακοπής).
• Μπορείτε να χρησιμοποιήσετε προκαθορισμένες κλάσεις πλέγματος (όπως .col-4) ή μίξεις Sass για περισσότερη σημασιολογική σήμανση.

Λάβετε υπόψη τους περιορισμούς και τα σφάλματα γύρω από το flexbox , όπως η αδυναμία χρήσης ορισμένων στοιχείων HTML ως flex κοντέινερ .

Επιλογές πλέγματος

Ενώ το Bootstrap χρησιμοποιεί ems ή rems για τον καθορισμό των περισσότερων μεγεθών, pxτα s χρησιμοποιούνται για σημεία διακοπής πλέγματος και πλάτη κοντέινερ. Αυτό συμβαίνει επειδή το πλάτος της θύρας προβολής είναι σε pixel και δεν αλλάζει ανάλογα με το μέγεθος της γραμματοσειράς .

Δείτε πώς λειτουργούν πτυχές του συστήματος πλέγματος Bootstrap σε πολλές συσκευές με ένα εύχρηστο τραπέζι.

Αυτόματη διάταξη στηλών

Χρησιμοποιήστε κατηγορίες στηλών για συγκεκριμένα σημεία διακοπής για εύκολο προσδιορισμό μεγέθους στηλών χωρίς ρητή αριθμημένη κλάση όπως .col-sm-6.

Ίσο πλάτος

Για παράδειγμα, εδώ είναι δύο διατάξεις πλέγματος που εφαρμόζονται σε κάθε συσκευή και θύρα προβολής, από xsέως xl. Προσθέστε οποιονδήποτε αριθμό κλάσεων χωρίς μονάδες για κάθε σημείο διακοπής που χρειάζεστε και κάθε στήλη θα έχει το ίδιο πλάτος.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Πολλαπλή γραμμή ίσου πλάτους

Δημιουργήστε στήλες ίσου πλάτους που εκτείνονται σε πολλές γραμμές, εισάγοντας ένα .w-100σημείο όπου θέλετε οι στήλες να σπάσουν σε μια νέα γραμμή. Κάντε τα διαλείμματα να ανταποκρίνονται αναμειγνύοντας .w-100με ορισμένα βοηθητικά προγράμματα προβολής με απόκριση .

Υπήρχε ένα σφάλμα Safari flexbox που εμπόδισε αυτήν τη λειτουργία χωρίς ρητή flex-basisή border. Υπάρχουν λύσεις για παλαιότερες εκδόσεις του προγράμματος περιήγησης, αλλά δεν θα πρέπει να είναι απαραίτητες εάν τα προγράμματα περιήγησης-στόχου σας δεν εμπίπτουν στις εκδόσεις με σφάλματα.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Ρύθμιση ενός πλάτους στήλης

Η αυτόματη διάταξη για στήλες πλέγματος flexbox σημαίνει επίσης ότι μπορείτε να ορίσετε το πλάτος μιας στήλης και να αλλάξετε το μέγεθος των αδελφών στηλών αυτόματα γύρω της. Μπορείτε να χρησιμοποιήσετε προκαθορισμένες κατηγορίες πλέγματος (όπως φαίνεται παρακάτω), μίξεις πλέγματος ή ενσωματωμένα πλάτη. Σημειώστε ότι οι άλλες στήλες θα αλλάξουν μέγεθος ανεξάρτητα από το πλάτος της κεντρικής στήλης.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Περιεχόμενο μεταβλητού πλάτους

Χρησιμοποιήστε col-{breakpoint}-autoκλάσεις για το μέγεθος των στηλών με βάση το φυσικό πλάτος του περιεχομένου τους.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Ανταποκρινόμενες τάξεις

Το πλέγμα του Bootstrap περιλαμβάνει πέντε επίπεδα προκαθορισμένων κλάσεων για τη δημιουργία σύνθετων διατάξεων με απόκριση. Προσαρμόστε το μέγεθος των στηλών σας σε πολύ μικρές, μικρές, μεσαίες, μεγάλες ή πολύ μεγάλες συσκευές όπως εσείς κρίνετε κατάλληλο.

Όλα τα σημεία διακοπής

Για πλέγματα που είναι ίδια από τη μικρότερη συσκευή έως τη μεγαλύτερη, χρησιμοποιήστε τις κλάσεις .colκαι . .col-*Καθορίστε μια αριθμημένη κλάση όταν χρειάζεστε μια στήλη ειδικού μεγέθους. Διαφορετικά, μη διστάσετε να επιμείνετε στο .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Στοιβάζονται σε οριζόντια

Χρησιμοποιώντας ένα ενιαίο σύνολο .col-sm-*κλάσεων, μπορείτε να δημιουργήσετε ένα βασικό σύστημα πλέγματος που ξεκινάει στοιβαγμένο και γίνεται οριζόντιο στο μικρό σημείο διακοπής ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Ανακατεψε και ταιριαξε

Δεν θέλετε οι στήλες σας απλώς να στοιβάζονται σε ορισμένες βαθμίδες πλέγματος; Χρησιμοποιήστε έναν συνδυασμό διαφορετικών κλάσεων για κάθε επίπεδο, όπως απαιτείται. Δείτε το παρακάτω παράδειγμα για μια καλύτερη ιδέα για το πώς λειτουργούν όλα.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Υδρορροές

Οι υδρορροές μπορούν να ρυθμιστούν με απόκριση με ειδικές κατηγορίες γεμισμάτων και αρνητικών περιθωρίων. Για να αλλάξετε τις υδρορροές σε μια δεδομένη σειρά, συνδυάστε ένα βοηθητικό πρόγραμμα αρνητικού περιθωρίου στο .rowκαι τα αντίστοιχα βοηθητικά προγράμματα πλήρωσης στο .cols. Το .containerή ο .container-fluidγονέας μπορεί να χρειαστεί επίσης προσαρμογή για να αποφευχθεί η ανεπιθύμητη υπερχείλιση, χρησιμοποιώντας ξανά το βοηθητικό πρόγραμμα ταιριάσματος padding.

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

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

Στήλες σειρών

Χρησιμοποιήστε τις αποκριτικές .row-cols-*κλάσεις για να ορίσετε γρήγορα τον αριθμό των στηλών που αποδίδουν καλύτερα το περιεχόμενο και τη διάταξή σας. Ενώ οι κανονικές .col-*κλάσεις ισχύουν για τις μεμονωμένες στήλες (π.χ. .col-md-4), οι τάξεις στηλών γραμμής ορίζονται στο γονικό .rowως συντόμευση.

Χρησιμοποιήστε αυτές τις τάξεις στηλών σειρών για να δημιουργήσετε γρήγορα βασικές διατάξεις πλέγματος ή για να ελέγξετε τις διατάξεις των καρτών σας.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Μπορείτε επίσης να χρησιμοποιήσετε το συνοδευτικό Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Ευθυγραμμία

Χρησιμοποιήστε βοηθητικά προγράμματα ευθυγράμμισης flexbox για κάθετη και οριζόντια στοίχιση στηλών. Ο Internet Explorer 10-11 δεν υποστηρίζει την κατακόρυφη στοίχιση ευέλικτων στοιχείων όταν το flex κοντέινερ έχει ένα min-heightόπως φαίνεται παρακάτω. Δείτε το Flexbugs #3 για περισσότερες λεπτομέρειες.

Κατακόρυφη στοίχιση

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Οριζόντια ευθυγράμμιση

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Χωρίς υδρορροές

Οι υδρορροές μεταξύ στηλών στις προκαθορισμένες κατηγορίες πλέγματος μπορούν να αφαιρεθούν με .no-gutters. Αυτό αφαιρεί το αρνητικό margins από .rowκαι το οριζόντιο paddingαπό όλες τις στήλες των άμεσων παιδιών.

Εδώ είναι ο πηγαίος κώδικας για τη δημιουργία αυτών των στυλ. Λάβετε υπόψη ότι οι παρακάμψεις στηλών καλύπτονται μόνο από τις πρώτες θυγατρικές στήλες και στοχεύονται μέσω του επιλογέα χαρακτηριστικών . Ενώ αυτό δημιουργεί έναν πιο συγκεκριμένο επιλογέα, η συμπλήρωση στηλών μπορεί ακόμα να προσαρμοστεί περαιτέρω με βοηθητικά προγράμματα διαστήματος .

Χρειάζεστε σχέδιο από άκρη σε άκρη; Ρίξτε τον γονέα .containerή .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Στην πράξη, ιδού πώς φαίνεται. Σημειώστε ότι μπορείτε να συνεχίσετε να το χρησιμοποιείτε με όλες τις άλλες προκαθορισμένες κατηγορίες πλέγματος (συμπεριλαμβανομένων των πλατών στηλών, των αποκρινόμενων επιπέδων, των αναπαραγγελιών και άλλων).

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Περιτύλιγμα στήλης

Εάν τοποθετηθούν περισσότερες από 12 στήλες σε μία μόνο γραμμή, κάθε ομάδα επιπλέον στηλών θα αναδιπλωθεί, ως μία μονάδα, σε μια νέα γραμμή.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Σπάει η στήλη

Η αλλαγή στηλών σε μια νέα γραμμή στο flexbox απαιτεί ένα μικρό hack: προσθέστε ένα στοιχείο με width: 100%όπου θέλετε να τυλίξετε τις στήλες σας σε μια νέα γραμμή. Κανονικά αυτό επιτυγχάνεται με πολλαπλά .rows, αλλά δεν μπορεί να το εξηγήσει κάθε μέθοδος υλοποίησης.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Μπορείτε επίσης να εφαρμόσετε αυτό το διάλειμμα σε συγκεκριμένα σημεία διακοπής με τα βοηθητικά προγράμματα προβολής που αποκρίνονται .

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Αναπαραγγελία

Παραγγελία μαθημάτων

Χρησιμοποιήστε .order-μαθήματα για τον έλεγχο της οπτικής σειράς του περιεχομένου σας. Αυτές οι κλάσεις αποκρίνονται, επομένως μπορείτε να ορίσετε το orderσημείο διακοπής (π.χ., .order-1.order-md-2). Περιλαμβάνει υποστήριξη 1μέσω 12και στα πέντε επίπεδα πλέγματος.

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Υπάρχουν επίσης responsive .order-firstκαι .order-lastκλάσεις που αλλάζουν το orderστοιχείο ενός στοιχείου εφαρμόζοντας order: -1και order: 13( order: $columns + 1), αντίστοιχα. Αυτές οι κλάσεις μπορούν επίσης να αναμειχθούν με τις αριθμημένες .order-*κλάσεις όπως απαιτείται.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Μετατόπιση στηλών

Μπορείτε να αντισταθμίσετε τις στήλες πλέγματος με δύο τρόπους: τις αποκριτικές .offset-κατηγορίες πλέγματος και τα βοηθητικά προγράμματα περιθωρίου . Οι κλάσεις πλέγματος έχουν μέγεθος ώστε να ταιριάζουν με στήλες, ενώ τα περιθώρια είναι πιο χρήσιμα για γρήγορες διατάξεις όπου το πλάτος της μετατόπισης είναι μεταβλητό.

Τάξεις όφσετ

Μετακινήστε τις στήλες προς τα δεξιά χρησιμοποιώντας .offset-md-*κλάσεις. Αυτές οι κλάσεις αυξάνουν το αριστερό περιθώριο μιας στήλης κατά *στήλες. Για παράδειγμα, .offset-md-4μετακινείται .col-md-4σε τέσσερις στήλες.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Εκτός από την εκκαθάριση στηλών σε σημεία διακοπής απόκρισης, μπορεί να χρειαστεί να επαναφέρετε τις μετατοπίσεις. Δείτε αυτό σε δράση στο παράδειγμα πλέγματος .

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Βοηθητικά προγράμματα περιθωρίου

Με τη μετάβαση στο flexbox στο v4, μπορείτε να χρησιμοποιήσετε βοηθητικά προγράμματα περιθωρίου όπως .mr-autoνα εξαναγκάσετε τις αδελφικές στήλες να απομακρυνθούν η μία από την άλλη.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Φωλιάζοντας

Για να ενσωματώσετε το περιεχόμενό σας με το προεπιλεγμένο πλέγμα, προσθέστε ένα νέο .rowκαι σύνολο .col-sm-*στηλών σε μια υπάρχουσα .col-sm-*στήλη. Οι ένθετες σειρές πρέπει να περιλαμβάνουν ένα σύνολο στηλών που αθροίζονται έως 12 ή λιγότερες (δεν απαιτείται να χρησιμοποιήσετε και τις 12 διαθέσιμες στήλες).

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass mixins

Όταν χρησιμοποιείτε τα πηγαία αρχεία Sass του Bootstrap, έχετε την επιλογή να χρησιμοποιήσετε μεταβλητές Sass και mixins για να δημιουργήσετε προσαρμοσμένες, σημασιολογικές και αποκριτικές διατάξεις σελίδας. Οι προκαθορισμένες κατηγορίες πλέγματος μας χρησιμοποιούν αυτές τις ίδιες μεταβλητές και μίξεις για να παρέχουν μια ολόκληρη σουίτα έτοιμων προς χρήση κλάσεων για γρήγορη απόκριση διατάξεων.

Μεταβλητές

Οι μεταβλητές και οι χάρτες καθορίζουν τον αριθμό των στηλών, το πλάτος της υδρορροής και το σημείο ερωτήματος μέσων από το οποίο θα ξεκινήσουν οι αιωρούμενες στήλες. Τα χρησιμοποιούμε για να δημιουργήσουμε τις προκαθορισμένες κατηγορίες πλέγματος που τεκμηριώνονται παραπάνω, καθώς και για τις προσαρμοσμένες μίξεις που αναφέρονται παρακάτω.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Μείγματα

Οι μίξεις χρησιμοποιούνται σε συνδυασμό με τις μεταβλητές πλέγματος για τη δημιουργία σημασιολογικού CSS για μεμονωμένες στήλες πλέγματος.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Παράδειγμα χρήσης

Μπορείτε να τροποποιήσετε τις μεταβλητές στις δικές σας προσαρμοσμένες τιμές ή απλώς να χρησιμοποιήσετε τις μίξεις με τις προεπιλεγμένες τιμές τους. Ακολουθεί ένα παράδειγμα χρήσης των προεπιλεγμένων ρυθμίσεων για τη δημιουργία διάταξης δύο στηλών με κενό μεταξύ τους.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Προσαρμογή του πλέγματος

Χρησιμοποιώντας τις ενσωματωμένες μεταβλητές Sass πλέγματος και τους χάρτες μας, είναι δυνατό να προσαρμόσετε πλήρως τις προκαθορισμένες κατηγορίες πλέγματος. Αλλάξτε τον αριθμό των επιπέδων, τις διαστάσεις του ερωτήματος πολυμέσων και τα πλάτη του κοντέινερ — στη συνέχεια κάντε εκ νέου μεταγλώττιση.

Στήλες και υδρορροές

Ο αριθμός των στηλών πλέγματος μπορεί να τροποποιηθεί μέσω μεταβλητών Sass. $grid-columnsχρησιμοποιείται για να δημιουργήσει τα πλάτη (σε ποσοστά) κάθε μεμονωμένης στήλης ενώ $grid-gutter-widthορίζει το πλάτος για τις υδρορροές στηλών.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Επίπεδες πλέγματος

Προχωρώντας πέρα ​​από τις ίδιες τις στήλες, μπορείτε επίσης να προσαρμόσετε τον αριθμό των επιπέδων πλέγματος. Εάν θέλατε μόνο τέσσερις βαθμίδες πλέγματος, θα ενημερώσατε το $grid-breakpointsκαι $container-max-widthsσε κάτι σαν αυτό:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Όταν κάνετε οποιεσδήποτε αλλαγές στις μεταβλητές ή τους χάρτες Sass, θα πρέπει να αποθηκεύσετε τις αλλαγές σας και να κάνετε εκ νέου μεταγλώττιση. Με αυτόν τον τρόπο θα βγει ένα ολοκαίνουργιο σύνολο προκαθορισμένων κατηγοριών πλέγματος για πλάτη στηλών, μετατοπίσεις και παραγγελία. Τα αποκριτικά βοηθητικά προγράμματα ορατότητας θα ενημερωθούν επίσης για να χρησιμοποιούν τα προσαρμοσμένα σημεία διακοπής. Βεβαιωθείτε ότι έχετε ορίσει τιμές πλέγματος στο px(όχι rem, em, ή %).