使用 flexbox
创建的Bootstrap 4网格系统完全响应并通过在页面上创建包含行和列的布局来扩展到12列(根据设备的大小).它提供了响应式，移动的第一流体网格系统，可在设备或视口大小增加时对列进行缩放.
必须将行放在 .container 类中才能正确对齐和填充.
对于响应宽度，使用 .container 类，并且对于所有视口的固定宽度，请使用 .container-fluid 类.
使用行创建水平的列组.
内容应放在列中，只有列可能是直接的子列行.
列包含用于控制它们之间空间的填充.
如果如果连续放置12列以上，则列将放在新行中.
列通过填充在列内容之间创建间隙.因此，您可以在行上使用 .no-gutters 类从列中删除边距和填充.
您可以通过使用五个网格断点使网格系统响应，例如超小，小，中，大和超大.
预定义的网格类，如.col-4可用于快速制作网格布局.较少的mixins也可以用于更多的语义布局.
下表总结了Bootstrap 4网格系统如何跨多个设备工作的方面 :
| 超小型设备(< 576px) | 小型设备(≥576px) | 中型设备(≥768px) | 大型设备(≥992px) | 超大型设备(≥1200px) | |
|---|---|---|---|---|---|
| 网格行为 | 始终水平 | 折叠开始，水平高于断点 | 折叠开始，水平高于断点 | 折叠开始，水平高于断点 | 折叠开始，水平高于断点 |
| 最大容器宽度 | 无(自动) | 540px | 720px | 960px | 1140px |
| 班级类 | .col - | .col-sm - | .col-md - | .col-lg - | .col-xl - |
| ＃列数 | 12 | 12 | 12 | 12 | 12 |
| 装订线宽度 | 30px (每列15px) | 30px (每列15px) | 30px (每列15px) | 30px (每列15px) | 30px (每列15px) |
| Nestable | 是 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 | 是 |
以下是Bootstrap 4 grid : 的基本结构;
<div class = "container"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row">...</div> </div>
以下是Bootstrap 4网格系统的示例 :
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>以下示例描述了为小型，中型和大型设备创建两个列布局。 在移动电话等小型设备上，列默认会自动变为水平。
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "grid_system"> <div class = "row"> <div class = "col-sm-6">.col-sm-6</div> <div class = "col-sm-6">.col-sm-6</div> </div> <div class = "row"> <div class = "col-sm-7">.col-sm-7</div> <div class = "col-sm-5">.col-sm-5</div> </div> <div class = "row"> <div class = "col-sm-4">.col-sm-4</div> <div class = "col-sm-8">.col-sm-8</div> </div> <div class = "row"> <div class = "col-sm-9">.col-sm-9</div> <div class = "col-sm-3">.col-sm-3</div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
以下示例描述了为中型和大型设备创建三个列布局。 如果屏幕分辨率大于或等于992像素，则它将以平板模式显示在平板电脑中，并且像往常一样，它将以纵向模式显示。
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "grid_system"> <div class = "row"> <div class = "col-sm-4">.col-sm-4</div> <div class = "col-sm-4">.col-sm-4</div> <div class = "col-sm-4">.col-sm-4</div> </div> <div class = "row"> <div class = "col-sm-3">.col-sm-3</div> <div class = "col-sm-4">.col-sm-4</div> <div class = "col-sm-5">.col-sm-5</div> </div> <div class = "row"> <div class = "col-sm-2">.col-sm-2</div> <div class = "col-sm-8">.col-sm-8</div> <div class = "col-sm-2">.col-sm-2</div> </div> <div class = "row"> <div class = "col-sm-2">.col-sm-2</div> <div class = "col-sm-3">.col-sm-3</div> <div class = "col-sm-7">.col-sm-7</div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
