English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 教程基本

Bootstrap4 Diseño flexible (Flex)

Bootstrap4 controla el diseño de la página a través de la clase flex.

caja flexible (flexbox)

Bootstrap 3 con Bootstrap 4 La mayor diferencia es Bootstrap 4 　utiliza la caja flexible para el diseño de la disposición, en lugar de usar浮动 para el diseño.

caja flexible es CSS3 un nuevo modelo de diseño, más adecuado para el diseño responsivo, si aún no conoces flex, puedes leer nuestros CSS3 caja flexible (Flex Box) tutoriales

Nota: IE9 y las versiones posteriores no admiten cajas flexibles, por lo que si necesita ser compatible con IE8-9，por favor usa Bootstrap 3。

El siguiente ejemplo utiliza d-clase flex crea un contenedor de cajas flexible y configura tres elementos subflexibles:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Flex</h2>
　　<p>Usar d-clase flex crea un contenedor de cajas flexible y configura tres elementos subflexibles: </p>
　　<div class="d-flex p-3　bg-texto secundario-white">　　
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Para crear un contenedor de cajas flexibles que se muestren en la misma línea, utilice d-inline-clase flex:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Flex en línea</h2>
　　<p>Para crear un contenedor de cajas flexibles que se muestren en la misma línea, utilice d-inline-flex clase:</p>
　　<div class="d-inline-flex p-3　bg-texto secundario-white">　　
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

dirección horizontal

.flex-row puede establecer la visualización horizontal de los elementos subflexibles, lo que es el valor predeterminado.

Se utiliza .flex-row-La clase 'reverse' se utiliza para establecer la visualización alineada a la derecha, es decir, con .flex-row dirección inversa.

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>dirección horizontal</h2>
　　<p>Usar .flex-La clase 'row' se utiliza para establecer la visualización horizontal de los elementos subflexibles: </p>
　　<div class="d-flex flex-row bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<p>.flex-row-reverse establece la alineación a la derecha: </p>
　　<div class="d-flex flex-row-inverso bg-secondary">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

dirección vertical

.flex-La clase 'column' se utiliza para establecer la visualización vertical de los elementos subflexibles, .flex-column-reverse se utiliza para rotar los elementos: }}

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Dirección vertical</h2>
　　<p>.flex-La clase column se utiliza para mostrar verticalmente los elementos flexibles:</p>
　　<div class="d-flex flex-column　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<p>.flex-column-La clase reverse se utiliza para mostrar verticalmente los elementos flexibles invertidos:</p>
　　<div class="d-flex flex-column-reverse">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Alineación del contenido

.justify-contenido-* La clase se utiliza para modificar la disposición de los elementos flexibles,* Los valores permitidos son:start (por defecto), end, center, between o around:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Manera de alinear el contenido</h2>
　　<p>　.justify-contenido-*　La clase se utiliza para modificar la disposición de los elementos flexibles,*　Los valores permitidos son: start (por defecto), end, center, between o around:</p>
　　<div class="d-flex　justify-contenido-inicio bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex　justify-contenido-final bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex　justify-contenido-centrado bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex　justify-contenido-between　bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex　justify-contenido-alrededor bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:


Ancho igual

.flex-La clase fill fuerza a todos los elementos flexibles a tener el mismo ancho:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Ancho igual</h2>
　　<p>.flex-La clase fill fuerza a todos los elementos flexibles a tener el mismo ancho:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　flex-fill　bg-info">Flex item　1</div>
　　　　<div class="p-2　flex-fill　bg-warning">Flex item　2</div>
　　　　<div class="p-2　flex-fill　bg-primary">Flex item　3</div>
　　</div>
　　<p>No se utiliza .flex-Ejemplo de clase fill:</p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Extensión

.flex-expandir-1 　Se utiliza para establecer que el elemento hijo utilice el espacio restante. En el siguiente ejemplo, los dos primeros elementos hijos solo han establecido el espacio necesario, y el último obtiene el espacio restante. :

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Expandir</h2>
　　<p>.flex-expandir-1　Se utiliza para establecer que el elemento hijo utilice el espacio restante:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　flex-expandir-1　bg-primary">Flex item　3</div>
　　</div>
　　<p>No se utiliza .flex-expandir-1　Ejemplo:</p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Aviso: Se utiliza .flex-contracción-1 Se utiliza para establecer las reglas de contracción del elemento hijo.

Orden

.order　clase puede establecer el orden de los elementos flexibles, desde .order-1 a .order-12La numeración más baja indica un peso más alto ( .order-1 Colocado antes de .order-2 ) :

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Orden</h2>
　　<p>.order　clase puede establecer el orden de los elementos flexibles, desde　.order-1　a　.order-12La numeración más baja indica un peso más alto:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　order-3　bg-info">Flex item　1</div>
　　　　<div class="p-2　order-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　order-1　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Margen

.mr-auto　clase puede establecer el margen derecho externo del elemento hijo en autoes decir, margin-right: auto!important;，.ml-auto　clase puede establecer el margen izquierdo externo del elemento hijo en autoes decir, margin-left: auto!important;:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Margen</h2>
　　<p>.mr-auto　clase puede establecer el margen derecho externo del elemento hijo en auto, .ml-auto　clase puede establecer el margen izquierdo externo del elemento hijo en auto, </p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　mr-auto　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　ml-auto　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

envolver

Los elementos del contenedor flexible pueden usar las siguientes tres clases: .flex-noenlazar (por defecto), .flex-wrap o .flex-envolver-inverso. Establecer el contenedor flexible en una sola línea o en varias líneas.

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Envolver</h2>
　　<p>En el contenedor flexible se pueden usar las siguientes tres clases para envolver elementos subordinados flexibles:　.flex-noenlazar (por defecto), .flex-wrap o .flex-envolver-inverso:</p>
　　<p><code>.flex-wrap:</code></p>
　　<div class="d-flex flex-wrap bg-ligero">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
　　<p><code>.flex-envolver-inverso:</code></p>
　　<div class="d-flex flex-envolver-inverso bg-ligero">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
　　<p><code>.flex-noenlazar:</code></p>
　　<div class="d-flex flex-noenlazar bg-ligero">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　　　<div class="p-2　border">Elemento flexible　26</div>
　　　　<div class="p-2　border">Elemento flexible　27</div>
　　　　<div class="p-2　border">Elemento flexible　28</div>
　　　　<div class="p-2　border">Elemento flexible　29</div>
　　　　<div class="p-2　border">Elemento flexible　30</div>
　　　　<div class="p-2　border">Elemento flexible　31</div>
　　　　<div class="p-2　border">Elemento flexible　32</div>
　　　　<div class="p-2　border">Elemento flexible　33</div>
　　　　<div class="p-2　border">Elemento flexible　34</div>
　　　　<div class="p-2　border">Elemento flexible　35</div>
　　</div>
　　<br>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Alineación de contenido

Podemos usar .align-contenido-* para controlar cómo se apilan los elementos subordinados en la dirección vertical, los valores incluidos son: .align-contenido-inicio (por defecto), .align-contenido-final, .align-contenido-centrado, .align-contenido-entre, .align-contenido-alrededor y .align-contenido-estirar.

Estas clases son ineficaces en elementos flexibles en una sola línea.

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Alineación de contenido</h2>
　　<p>Podemos usar　.align-contenido-*　para controlar la alineación de los elementos subordinados en la dirección vertical.</p>
　　<p><strong>Nota:</<strong>Este ejemplo no funciona bien en dispositivos pequeños. Estas clases son ineficaces en elementos flexibles en una sola línea.</p>
　　<p>.align-contenido-inicio (por defecto):</p>
　　<div class="d-flex flex-alineación wrap-contenido-inicio bg-light" style="height:300px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
　　<p>.align-contenido-end:</p>
　　<div class="d-flex flex-alineación wrap-contenido-final bg-light" style="height:300px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
　　<p>.align-contenido-center:</p>
　　<div class="d-flex flex-alineación wrap-contenido-centrado bg-light" style="height:300px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
　　<p>.align-contenido-alrededor:</p>
　　<div class="d-flex flex-alineación wrap-contenido-alrededor bg-light" style="height:300px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
　　<p>.align-contenido-estirar:</p>
　　<div class="d-flex flex-alineación wrap-contenido-estirar bg-light" style="height:300px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　　　<div class="p-2　border">Elemento flexible　4</div>
　　　　<div class="p-2　border">Elemento flexible　5</div>
　　　　<div class="p-2　border">Elemento flexible　6</div>
　　　　<div class="p-2　border">Elemento flexible　7</div>
　　　　<div class="p-2　border">Elemento flexible　8</div>
　　　　<div class="p-2　border">Elemento flexible　9</div>
　　　　<div class="p-2　border">Elemento flexible　10</div>
　　　　<div class="p-2　border">Elemento flexible　11</div>
　　　　<div class="p-2　border">Elemento flexible　12</div>
　　　　<div class="p-2　border">Elemento flexible　13　</div>
　　　　<div class="p-2　border">Elemento flexible　14</div>
　　　　<div class="p-2　border">Elemento flexible　15</div>
　　　　<div class="p-2　border">Elemento flexible　16</div>
　　　　<div class="p-2　border">Elemento flexible　17</div>
　　　　<div class="p-2　border">Elemento flexible　18</div>
　　　　<div class="p-2　border">Elemento flexible　19</div>
　　　　<div class="p-2　border">Elemento flexible　20</div>
　　　　<div class="p-2　border">Elemento flexible　21</div>
　　　　<div class="p-2　border">Elemento flexible　22</div>
　　　　<div class="p-2　border">Elemento flexible　23</div>
　　　　<div class="p-2　border">Elemento flexible　24</div>
　　　　<div class="p-2　border">Elemento flexible　25</div>
　　</div>
　　<br>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:


Alineación de elementos subordinados

Si desea ajustar alineación de elementos subordinados en una sola línea, puede usar .align-elementos-* la clase para controlar, los valores incluidos son:.alineación-elementos-inicio, .align-elementos-final, .align-elementos-centrado, .align-elementos-línea base, y .align-elementos-estirar (por defecto)。

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Alineación de elementos subordinados</h2>
　　<p>Si desea ajustar alineación de elementos subordinados en una sola línea, puede usar .align-contenido-*　clase para controlar.</p>
　　<p>.align-elementos-start:</p>
　　<div class="d-alineación flex-elementos-inicio bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-elementos-end:</p>
　　<div class="d-alineación flex-elementos-final bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-elementos-center:</p>
　　<div class="d-alineación flex-elementos-centrado bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-elementos-baseline:</p>
　　<div class="d-alineación flex-elementos-línea base bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-elementos-stretch (por defecto):</p>
　　<div class="d-alineación flex-elementos-estirar bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Alineación de elementos subordinados específicos

Si desea ajustar alineación de elementos subordinados específicos, puede usar .align-mismo-* la clase para controlar, los valores incluidos son: .align-mismo-inicio, .align-mismo-final, .align-mismo-centrado, .align-mismo-línea base, y .align-mismo-estirar (por defecto).

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Alineación automática</h2>
　　<p>Si desea establecer la alineación de un elemento subyacente específico, puede usar .align-mismo-*　clase para controlar.</p>
　　<p>.align-mismo-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border align-mismo-start">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-mismo-end:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border align-mismo-end">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-mismo-center:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border align-mismo-center">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-mismo-baseline:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border align-mismo-baseline">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
　　<p>.align-mismo-stretch (por defecto):</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Elemento flexible　1</div>
　　　　<div class="p-2　border align-mismo-stretch">Elemento flexible　2</div>
　　　　<div class="p-2　border">Elemento flexible　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Prueba y observa ‹/›

El efecto después de ejecutar es el siguiente:

Clase flexible responsiva

Podemos establecer la clase flex según los dispositivos diferentes para lograr un diseño de página responsivo, como se muestra en la siguiente tabla: * Los valores permitidos son: sm, md, lg o xl, que corresponden a dispositivos pequeños, medianos, grandes y ultra grandes.

ClaseEjemploImplementar
Contenedor flexible
.d-*-flexCrear contenedores de cajas flexibles según los dispositivos de pantalla diferentespruebe 　
Dirección
.flex-*-rowMostrar elementos flexibles en la dirección horizontal según los dispositivos de pantalla diferentespruebe 　
.flex-*-columnMostrar elementos flexibles en la dirección vertical según los dispositivos de pantalla diferentespruebe 　
Alineación de contenido
.justify-contenido-*-inicialMostrar elementos flexibles en la posición de inicio (alineación a la izquierda) según los dispositivos de pantalla diferentespruebe 　
.justify-contenido-*-centroMostrar elementos flexibles en el centro del contenedor flex según los dispositivos de pantalla diferentespruebe 　
.justify-contenido-*-alrededorUsar "around" para mostrar elementos flexibles según los dispositivos de pantalla diferentespruebe 　
Extensión
.flex-*-expandir-0Los dispositivos de pantalla diferentes no establecen la extensión　
.flex-*-expandir-1configurar expansión en dispositivos de pantalla diferentes　
contracción
.flex-*-contracción-0no configurar contracción en dispositivos de pantalla diferentes　
.flex-*-contracción-1configurar contracción en dispositivos de pantalla diferentes　
envolver
.flex-*-sin_ajustarno configurar envolver en dispositivos de pantalla diferentespruebe 　
.flex-*-envolver-inversorevisa elementos envueltos en dispositivos de pantalla diferentespruebe 　
.alineación-contenido-*-finaldependiendo del dispositivo de pantalla, apila elementos en la posición finalpruebe 　
.alineación-contenido-*-alrededordependiendo del dispositivo de pantalla, apila elementos usando "alrededor"pruebe 　
alineación de elementos
.alineación-elementos-*-inicialdependiendo del dispositivo de pantalla, muestra los elementos en la posición inicial de la línea.pruebe 　
.alineación-elementos-*-centrodependiendo del dispositivo de pantalla, muestra los elementos en el centro de la línea.pruebe 　
.alineación-elementos-*-estirardependiendo del dispositivo de pantalla, estira la altura del elemento y muestra en la misma línea.pruebe 　
.alineación-mismo-*-finaldependiendo del dispositivo de pantalla, muestra un solo elemento subyacente en la posición finalpruebe 　
.alineación-mismo-*-línea_basedependiendo del dispositivo de pantalla, muestra un solo elemento subyacente en la posición de la línea basepruebe 　
Bootstrap4 objeto multimediaBootstrap4 herramientas