Contenedores

Imayna llamkanku

Contenedores nisqaqa Bootstrap kaqpi aswan sapsi churana elemento kanku chaymanta ñawpaqmanta ruwasqa rejilla sistemaykuta llamk'achkaspa mañasqa kanku . Contenedores llamk'achinku hap'inapaq, pad, chaymanta (wakin kuti) chay ukhupi contenidota chawpichaypaq. Waqaychakuna anidado kanman chaypas, aswan layoutkuna mana anidado waqaychanata munanchu.

Bootstrap kimsa chikan waqaychanakunawan hamun:

• .container, mayqinchus max-widthsapa kutichiq p’akiypi a churan
• .container-fluid, chaytaq width: 100%tukuy p’akikuykunapi kachkan
• .container-{breakpoint}, chaymi width: 100%nisqa pakikunankama

Uraypi tabla rikuchin imayna sapa contenedor's max-widthtupachisqa original .containerkaqwan chaymanta .container-fluidsapa p'akiy chimpapi.

Chaykunata ruwaypi qhaway hinaspa tupachiy Rejilla ejemploykupi .

Ñawpaqmanta churasqa waqaychana

Ñawpaqmanta .containerclaseyku huk kutichiq, takyasqa-anchoyuq waqaychana, max-widthsapa p'akiypi tikrayninkunata niyta munan.

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

Contenedores respuestas nisqa

Kutichiq waqaychanakuna huk clase 100% ancho kaqta riqsichiyta saqin chaymanta willasqa p'akiy puntoman chayanankama, chaymanta max-widthsapa aswan hatun pakikuypaq s churayku. Ejemplopaq, .container-sm100% ancho kachkan qallarinanpaq chay smbreakpoint chayanankama, maypichus escalanqa md, lg, xl, chaymanta 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>

Fluido nisqa waqaychanakuna

Huk hunt'asqa anchoyuq waqaychanapaq llamk'achiy .container-fluid, qhaway punkup tukuy anchunta mast'ariq.

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

Sass

Hawa rikuchisqa hina, Bootstrap huk serie ñawpaqmanta riqsisqa waqaychana clasekuna ruwan yanapasunaykipaq munasqayki churanakuna ruwayta. Kay ñawpaqmanta riqsisqa waqaychana clasekunata ruwayta atikunki Sass mapa (kaypi tarisqa _variables.scss) chayta kallpachaq tikraspa:

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

Sass kaqmanta ruwaymanta aswan, Sass mixinniykuwan kikiyki waqaychanakuna ruwayta atikunki.

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

Aswan willakuypaq chaymanta ejemplokuna imayna Sass mapayku chaymanta tikraqniyku tikranapaq, ama hina kaspa qhaway Sass t'aqapi Grid qillqapi .