Στήλες

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

Σε αυτήν την σελίδα

Ψηλά το κεφάλι! Βεβαιωθείτε ότι έχετε διαβάσει πρώτα τη σελίδα Πλέγμα πριν βουτήξετε στον τρόπο τροποποίησης και προσαρμογής των στηλών πλέγματος σας.

Πώς λειτουργούν

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

Ευθυγραμμία

Χρησιμοποιήστε βοηθητικά προγράμματα ευθυγράμμισης flexbox για κάθετη και οριζόντια στοίχιση στηλών.

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

Μία από τις τρεις στήλες

<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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

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

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

.col-9

.col-4
Από 9 + 4 = 13 > 12, αυτό το πλάτος τεσσάρων στηλών div τυλίγεται σε μια νέα γραμμή ως μία συνεχόμενη μονάδα.

.col-6
Οι επόμενες στήλες συνεχίζονται κατά μήκος της νέας γραμμής.

<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, αλλά δεν μπορεί να το εξηγήσει κάθε μέθοδος υλοποίησης.

.col-6 .col-sm-3

<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>

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

.col-6 .col-sm-4

<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μέσω 5και στα έξι επίπεδα πλέγματος.

Πρώτα στο DOM, δεν εφαρμόστηκε παραγγελία

Δεύτερος στο DOM, με μεγαλύτερη παραγγελία

Τρίτος στο DOM, με τάξη 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6, αντίστοιχα. Αυτές οι κλάσεις μπορούν επίσης να αναμειχθούν με τις αριθμημένες .order-*κλάσεις όπως απαιτείται.

Πρώτη στο DOM, παραγγελία τελευταία

Δεύτερος στο DOM, χωρίς παραγγελία

Τρίτος στο DOM, παραγγέλθηκε πρώτος

<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σε τέσσερις στήλες.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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, μπορείτε να χρησιμοποιήσετε βοηθητικά προγράμματα περιθωρίου όπως .me-autoνα εξαναγκάσετε τις αδελφικές στήλες να απομακρυνθούν η μία από την άλλη.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

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

Αυτόνομες τάξεις στηλών

Οι .col-*κλάσεις μπορούν επίσης να χρησιμοποιηθούν έξω από το a .rowγια να δώσουν σε ένα στοιχείο ένα συγκεκριμένο πλάτος. Κάθε φορά που οι κατηγορίες στηλών χρησιμοποιούνται ως μη άμεσες θυγατρικές μιας σειράς, τα συμπληρώματα παραλείπονται.

.col-3: πλάτος 25%

.col-sm-9: πλάτος 75% πάνω από το σημείο διακοπής sm

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

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

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

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

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

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>