Skip to main content Skip ad navigationem soUicitudo
in English

Continentes

Vasa fundamentalia sunt clausurae structurae Bootstrap quae continent, caudex et contentus intra datam machinam seu prospectum ponunt.

Quam ad operandum

Continentes in Bootstrap principales sunt layout elementi et requiruntur cum usura systematis nostri default gridis . Vasa continent, caudex et interdum contentus in se continet. Dum continentia nidificari potest , plurimae tabulae receptaculum nidum non requirunt.

Bootstrap venit cum tribus vasis diversis;

  • .container, quod ponit max-widthad utrumque responsurum breakpoint
  • .container-fluidquae est width: 100%omnino breakpoints
  • .container-{breakpoint}quae est width: 100%usque ad certum breakpoint

Mensa infra illustrat quomodo singula continentis max-widthcomparat cum originali .containeret .container-fluidper quamlibet rupturam.

In actione vide et confer in exemplo nostro Grid .

Extra parva
<576px
Parvus
≥576px
Medium
≥768px
Magnae
≥992px
X-Large
≥1200px
XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Default continens

Classis default noster .containerest continens fixum-latum et responsivum, significationes suas max-widthin unoquovis fracturae loco mutationes.

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

Responsiva continentia

Vasa responsava permittunt te genus C% latum denotare usque dum certum confractionis punctum attingitur, postquam max-widths pro singulis punctionibus superiorum applicamus. Exempli gratia: .container-smC% lata est incipere usque ad smpunctum ad ventum, ubi ascendet cum md, lg, xl, et 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>

Liquor vasa

Utere .container-fluidlatitudine plena continente, totam latitudinem prospectus enucleando.

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

Sass

Ut supra ostensum est, Bootstrap seriem praedefinitam continentis classes generat, ut tibi propositas quas desideras aedificandas adiuvet. Possis domicilii has praefinitas classes continens modificatio Sassae map (inventa _variables.scss) quae eas potentias;

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

Praeter Sass customising, etiam vasa tua cum Sass mixin nostro creare potes.

// 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();
}

Pro pluribus informationibus et exemplis in quomodo ad mappas nostras Sass et variabiles modificare, placere ad sectionem in Grid documentorum Sass referre .