Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
in English

Εμπορευματοκιβώτια

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

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

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

Το Bootstrap έρχεται με τρία διαφορετικά δοχεία:

  • .container, το οποίο ορίζει ένα max-widthσε κάθε σημείο διακοπής απόκρισης
  • .container-fluid, το οποίο βρίσκεται width: 100%σε όλα τα σημεία διακοπής
  • .container-{breakpoint}, το οποίο είναι width: 100%μέχρι το καθορισμένο σημείο διακοπής

Ο παρακάτω πίνακας δείχνει πώς max-widthσυγκρίνεται κάθε κοντέινερ με το αρχικό .containerκαι .container-fluidσε κάθε σημείο διακοπής.

Δείτε τα σε δράση και συγκρίνετε τα στο παράδειγμά μας Grid .

Εξαιρετικά μικρό
<576 px
Μικρό
≥576 px
Μεσαίο
≥768 px
Μεγάλο
≥992 px
X-Large
≥1200 px
XX-Large
≥1400 px
.container 100% 540 εικονοστοιχεία 720 εικονοστοιχεία 960 εικονοστοιχεία 1140 εικονοστοιχεία 1320 εικονοστοιχεία
.container-sm 100% 540 εικονοστοιχεία 720 εικονοστοιχεία 960 εικονοστοιχεία 1140 εικονοστοιχεία 1320 εικονοστοιχεία
.container-md 100% 100% 720 εικονοστοιχεία 960 εικονοστοιχεία 1140 εικονοστοιχεία 1320 εικονοστοιχεία
.container-lg 100% 100% 100% 960 εικονοστοιχεία 1140 εικονοστοιχεία 1320 εικονοστοιχεία
.container-xl 100% 100% 100% 100% 1140 εικονοστοιχεία 1320 εικονοστοιχεία
.container-xxl 100% 100% 100% 100% 100% 1320 εικονοστοιχεία
.container-fluid 100% 100% 100% 100% 100% 100%

Προεπιλεγμένο κοντέινερ

Η προεπιλεγμένη .containerκλάση μας είναι ένα κοντέινερ σταθερού πλάτους με απόκριση, που σημαίνει ότι οι max-widthαλλαγές του σε κάθε σημείο διακοπής.

<div class="container">
  <!-- Content here -->
</div>

Αποκριτικά δοχεία

Τα αποκριτικά κοντέινερ σάς επιτρέπουν να καθορίσετε μια κλάση που έχει πλάτος 100% μέχρι να επιτευχθεί το καθορισμένο σημείο διακοπής, μετά από το οποίο εφαρμόζουμε max-widths για καθένα από τα υψηλότερα σημεία διακοπής. Για παράδειγμα, .container-smείναι 100% πλάτος για να ξεκινήσε�� μέχρι να φτάσει το smσημείο διακοπής, όπου θα κλιμακωθεί με md, lg, xlκαι xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Δοχεία υγρών

Χρησιμοποιήστε .container-fluidτο για ένα κοντέινερ πλήρους πλάτους, που εκτείνεται σε όλο το πλάτος της θύρας προβολής.

<div class="container-fluid">
  ...
</div>

Sass

Όπως φαίνεται παραπάνω, το Bootstrap δημιουργεί μια σειρά από προκαθορισμένες κλάσεις κοντέινερ για να σας βοηθήσει να δημιουργήσετε τις διατάξεις που επιθυμείτε. Μπορείτε να προσαρμόσετε αυτές τις προκαθορισμένες κατηγορίες κοντέινερ τροποποιώντας τον χάρτη Sass (που βρίσκεται στο _variables.scss) που τις τροφοδοτεί:

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

Εκτός από την προσαρμογή του Sass, μπορείτε επίσης να δημιουργήσετε τα δικά σας κοντέινερ με τη μίξη Sass.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Για περισσότερες πληροφορίες και παραδείγματα σχετικά με τον τρόπο τροποποίησης των χαρτών και των μεταβλητών Sass, ανατρέξτε στην ενότητα Sass της τεκμηρίωσης Grid .