in English

Contenedores

Contenedores huk fundamental bloque de construcción Bootstrap kaqmanta kanku chaymanta huk qusqa dispositivo utaq qhaway punku ukhupi contenidoykita hap'inku, pad, chaymanta chiqanchanku.

Kay p'anqapi

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-{breakpoint}, chaymi width: 100%nisqa pakikunankama
.container-fluid, chaytaq width: 100%tukuy p’akikuykunapi kachkan

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

Chaykunata ruwaypi qhaway hinaspa tupachiy Rejilla ejemploykupi .

	Extra pequeño <576px nisqa	Uchuy ≥576px nisqa	Chawpi ≥768px nisqa	Hatun ≥992px nisqa	X-Hatun ≥1200px nisqa	XX-Hatun ≥1400px nisqa
`.container`	100% nisqa.	540px nisqa	720px nisqa	960px nisqa	1140px nisqa	1320px nisqa
`.container-sm`	100% nisqa.	540px nisqa	720px nisqa	960px nisqa	1140px nisqa	1320px nisqa
`.container-md`	100% nisqa.	100% nisqa.	720px nisqa	960px nisqa	1140px nisqa	1320px nisqa
`.container-lg`	100% nisqa.	100% nisqa.	100% nisqa.	960px nisqa	1140px nisqa	1320px nisqa
`.container-xl`	100% nisqa.	100% nisqa.	100% nisqa.	100% nisqa.	1140px nisqa	1320px nisqa
`.container-xxl`	100% nisqa.	100% nisqa.	100% nisqa.	100% nisqa.	100% nisqa.	1320px nisqa
`.container-fluid`	100% nisqa.	100% nisqa.	100% nisqa.	100% nisqa.	100% nisqa.	100% nisqa.

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