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

Bootstrap4 基本教程

Bootstrap4 Flex (Elastischer) Layout

Bootstrap4 durch die Klasse flex das Layout der Seite zu steuern.

Elastic Box (flexbox)

Bootstrap 3 mit Bootstrap 4 Der größte Unterschied ist Bootstrap 4 　Verwenden Sie Elastic Box, um das Layout zu gestalten, anstatt Float zu verwenden.

Elastic Box ist CSS3 eine neue Layout-Modus, der besser für responsive Design geeignet ist, wenn Sie Flex noch nicht verstehen, können Sie unsere CSS3 Elastic Box (Flex Box) Tutorials

Beachten Sie: IE9 und die folgenden Versionen unterstützen keine Flex-Box, daher wenn Sie IE kompatibel machen müssen8-9，Bitte verwenden Sie Bootstrap 3.

Der folgende Beispiel verwendet d-flex Klasse erstellt einen flexiblen Box-Container und konfiguriert drei flexible Unterelemente:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>Verwenden Sie d-flex Klasse erstellt einen flexiblen Box-Container und konfiguriert drei flexible Unterelemente:</p>
　　<div　class="d-flex p-3　bg-secondary text-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>
测试看看 ‹/›

运行后效果如下：

Um einen flexiblen Box-Container anzuzeigen, der auf einer Zeile positioniert ist, können Sie d verwenden-inline-flex Klasse:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>inline Flex</h2>
　　<p>Um einen flexiblen Box-Container anzuzeigen, der auf einer Zeile positioniert ist, können Sie d verwenden-inline-flex Klasse:</p>
　　<div　class="d-inline-flex p-3　bg-secondary text-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>
测试看看 ‹/›

运行后效果如下：

horizontale Richtung

.flex-row kann die horizontale Anzeige der flexiblen Unterelemente konfigurieren, das ist die Voreinstellung.

使用 .flex-row-Die Klasse 'reverse' wird verwendet, um die rechte Ausrichtung zu konfigurieren, d.h. mit .flex-row umgekehrt.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>horizontale Richtung</h2>
　　<p>Verwenden Sie .flex-Die Klasse 'row' wird verwendet, um die horizontale Anzeige der flexiblen Unterelemente zu konfigurieren:</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 setzt die Ausrichtung nach rechts:</p>
　　<div　class="d-flex flex-row-reverse 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>
测试看看 ‹/›

运行后效果如下：

vertikale Richtung

.flex-Die Klasse 'column' wird verwendet, um die vertikale Anzeige der flexiblen Unterelemente zu konfigurieren, .flex-column-reverse 用于翻转子元素：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>垂直方向</h2>
　　<p>.flex-column 类用于设置弹性子元素垂直方向显示：</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-reverse 类用于设置弹性子元素垂直方向翻转显示：</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>
测试看看 ‹/›

运行后效果如下：

内容排列

.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>内容排列方式</h2>
　　<p> .justify-content-*　类用于修改弹性子元素的排列方式，*　号允许的值有：start (默认), end, center, between 或 around:</p>
　　<div　class="d-flex justify-content-start 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-content-end 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-content-center 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-content-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-content-around 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>
测试看看 ‹/›

运行后效果如下：


等宽

.flex-fill 类强制设置各个弹性子元素的宽度是一样的:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>等宽</h2>
　　<p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的:</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>不使用 .flex-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>
测试看看 ‹/›

运行后效果如下：

扩展

.flex-expand-1 　用于设置子元素使用剩下的空间。以下示例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>扩展</h2>
　　<p>.flex-expand-1　用于设置子元素使用剩下的空间：</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-expand-1　bg-primary">Flex Item　3</div>
　　</div>
　　<p>不使用 .flex-expand-1　示例:</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>
测试看看 ‹/›

运行后效果如下：

提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。

排序

.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>排序</h2>
　　<p>.order 类可以设置弹性子元素的排序，从 .order-1　到 .order-12，数字越低权重越高:</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>
测试看看 ‹/›

运行后效果如下：

外边距

.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>外边距</h2>
　　<p>.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 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>
测试看看 ‹/›

运行后效果如下：

包裹

Die im Elastikcontainer eingeschlossenen Unterlemente können mit folgenden drei Klassen verwendet werden: .flex-nowrap (Standard), .flex-wrap oder .flex-wrap-reverse. Setzen Sie den flex Container auf einzeilig oder mehrzeilig.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>Einpacken</h2>
　　<p>Um flexible Container mit flexiblen Unterelementen zu umschließen, können die folgenden drei Klassen verwendet werden: .flex-nowrap (Standard), .flex-wrap oder .flex-wrap-reverse:</p>
　　<p><code>.flex-wrap:</code></p>
　　<div　class="d-flex flex-wrap bg-light">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
　　<p><code>.flex-wrap-reverse:</code></p>
　　<div　class="d-flex flex-wrap-reverse bg-light">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
　　<p><code>.flex-nowrap:</code></p>
　　<div　class="d-flex flex-nowrap bg-light">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　　　<div　class="p-2　border">Flex　item　26</div>
　　　　<div　class="p-2　border">Flex　item　27</div>
　　　　<div　class="p-2　border">Flex　item　28</div>
　　　　<div　class="p-2　border">Flex　item　29</div>
　　　　<div　class="p-2　border">Flex　item　30</div>
　　　　<div　class="p-2　border">Flex　item　31</div>
　　　　<div　class="p-2　border">Flex　item　32</div>
　　　　<div　class="p-2　border">Flex　item　33</div>
　　　　<div　class="p-2　border">Flex　item　34</div>
　　　　<div　class="p-2　border">Flex　item　35</div>
　　</div>
　　<br>
</div>
</body>
</html>
测试看看 ‹/›

运行后效果如下：

内容对齐

Wir können .align verwenden-content-* zur Kontrolle, wie die Unterelemente in der vertikalen Richtung gestapelt werden, die Werte umfassen: .align-content-start (Standard), .align-content-end, .align-content-center, .align-content-between, .align-content-around und .align-content-stretch.

Diese Klassen sind in einzeiligen flexiblen Unterelementen nicht wirksam.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>Inhaltsausrichtung</h2>
　　<p>Wir können .align verwenden-content-*　zur Kontrolle der Ausrichtung der Unterelemente in der vertikalen Richtung.</p>
　　<p><strong>Hinweis:</<strong> Diese Beispiel zeigt auf kleinen Geräten nicht gut. Diese Klassen sind in einzeiligen flexiblen Unterelementen nicht wirksam.</p>
　　<p>.align-content-start (Standard):</p>
　　<div　class="d-flex flex-wrap align-content-start bg-light"　style="height:300px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
　　<p>.align-content-end:</p>
　　<div　class="d-flex flex-wrap align-content-end bg-light"　style="height:300px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
　　<p>.align-content-center:</p>
　　<div　class="d-flex flex-wrap align-content-center bg-light"　style="height:300px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
　　<p>.align-content-around:</p>
　　<div　class="d-flex flex-wrap align-content-around bg-light"　style="height:300px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
　　<p>.align-content-stretch:</p>
　　<div　class="d-flex flex-wrap align-content-stretch bg-light"　style="height:300px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　20</div>
　　　　<div　class="p-2　border">Flex　item　21</div>
　　　　<div　class="p-2　border">Flex　item　22</div>
　　　　<div　class="p-2　border">Flex　item　23</div>
　　　　<div　class="p-2　border">Flex　item　24</div>
　　　　<div　class="p-2　border">Flex　item　25</div>
　　</div>
　　<br>
</div>
</body>
</html>
测试看看 ‹/›

运行后效果如下：


Ausrichtung der Unterelemente

Um die Ausrichtung eines einzigen Zeilenunterelements zu setzen, kann .align verwendet werden-items-* Klassen zur Kontrolle, die Werte umfassen:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, und .align-items-stretch (Standard).

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>Ausrichtung der Unterelemente</h2>
　　<p>Um die Ausrichtung eines einzigen Zeilenunterelements zu setzen, kann .align verwendet werden-content-*　类来控制。</p>
　　<p>.align-items-start:</p>
　　<div　class="d-flex align-items-start bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-items-end:</p>
　　<div　class="d-flex align-items-end bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-items-center:</p>
　　<div　class="d-flex align-items-center bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-items-baseline:</p>
　　<div　class="d-flex align-items-baseline bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-items-stretch　(默认):</p>
　　<div　class="d-flex align-items-stretch bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
测试看看 ‹/›

运行后效果如下：

Ausrichtung eines bestimmten Unterelements

Um die Ausrichtung eines bestimmten Unterelements zu setzen, kann .align verwendet werden-self-* Klassen zur Kontrolle, die Werte umfassen: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, und .align-self-stretch (Standard).

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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>Align　Self</h2>
　　<p>如果要设置指定子元素对齐对齐可以使用　.align-self-*　类来控制。</p>
　　<p>.align-self-start:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-start">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-end:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-end">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-center:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-center">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-baseline:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-baseline">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-stretch　(默认):</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-stretch">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
测试看看 ‹/›

运行后效果如下：

响应式 flex 类

我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可能的值有：sm, md, lg 或 xl，对应的是小型设备、中型设备，大型设备，超大型设备。

类示例实现
弹性容器
.d-*-flex根据不同的屏幕设备创建弹性盒子容器尝试一下 　
方向
.flex-*-row根据不同的屏幕设备在水平方向显示弹性子元素尝试一下 　
.flex-*-column根据不同的屏幕设备在垂直方向显示弹性子元素尝试一下 　
内容对齐
.justify-content-*-start根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)尝试一下 　
.justify-content-*-center根据不同屏幕设备在 flex 容器中居中显示子元素尝试一下 　
.justify-content-*-around根据不同屏幕设备使用 "around" 显示弹性子元素尝试一下 　
扩展
.flex-*-expand-0不同的屏幕设备不设置扩展　
.flex-*-expand-1不同的屏幕设备设置扩展　
收缩
.flex-*-shrink-0不同的屏幕设备不设置收缩　
.flex-*-shrink-1不同的屏幕设备设置收缩　
包裹
.flex-*-nowrap不同的屏幕设备不设置包裹元素尝试一下 　
.flex-*-wrap-reverse不同的屏幕设备反转包裹元素尝试一下 　
.align-content-*-end根据不同屏幕设备在结束位置堆叠元素尝试一下 　
.align-content-*-around根据不同屏幕设备，使用 "around" 堆叠元素尝试一下 　
元素对齐
.align-items-*-start根据不同屏幕设备，让元素在头部显示在同一行。尝试一下 　
.align-items-*-center根据不同屏幕设备，让元素在中间位置显示在同一行。尝试一下 　
.align-items-*-stretch根据不同屏幕设备，让元素延展高度并显示在同一行。尝试一下 　
.align-self-*-end根据不同屏幕设备，让单独一个子元素显示在尾部尝试一下 　
.align-self-*-baseline根据不同屏幕设备，让单独一个子元素显示在基线位置尝试一下 　
Bootstrap4 多媒体对象Bootstrap4 小工具