Contenedores

Como funcionan

Os contedores son o elemento de deseño máis básico en Bootstrap e son necesarios cando se usa o noso sistema de grade predeterminado . Os contedores úsanse para conter, almofada e (ás veces) centrar o contido neles. Aínda que os contedores poden ser aniñados, a maioría dos deseños non precisan dun contenedor aniñado.

Bootstrap vén con tres recipientes diferentes:

• .container, que establece un max-widthen cada punto de interrupción de resposta
• .container-fluid, que está width: 100%en todos os puntos de interrupción
• .container-{breakpoint}, que é width: 100%ata o punto de interrupción especificado

A seguinte táboa ilustra como se max-widthcompara cada contedor co orixinal .containere .container-fluiden cada punto de interrupción.

Véaos en acción e compáraos no noso exemplo de Grid .

Contedor predeterminado

A nosa clase predeterminada .containeré un contedor sensible e de ancho fixo, é dicir, os seus max-widthcambios en cada punto de interrupción.

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

Contenedores sensibles

Os contedores sensibles permítenche especificar unha clase que teña o 100 % de ancho ata que se alcance o punto de interrupción especificado, despois do cal aplicamos max-widths para cada un dos puntos de interrupción máis altos. Por exemplo, .container-smten un ancho 100 % para comezar ata smque se alcance o punto de interrupción, onde se escalará con md, lg, xle 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>

Recipientes de fluídos

Utilízase .container-fluidpara un contedor de ancho completo, que abarque todo o ancho da ventana gráfica.

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

Sass

Como se mostra arriba, Bootstrap xera unha serie de clases de contedores predefinidas para axudarche a crear os deseños que desexes. Podes personalizar estas clases de contedores predefinidas modificando o mapa Sass (que se atopa en _variables.scss) que as alimenta:

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

Ademais de personalizar o Sass, tamén podes crear os teus propios recipientes co noso mixin 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();
}

Para obter máis información e exemplos sobre como modificar os nosos mapas e variables Sass, consulte a sección Sass da documentación de Grid .