Bootstrap 4 - 网格系统

Bootstrap 4网格系统 - 从基本概念到高级概念，从简单和简单的步骤学习Bootstrap 4，其中包括概述，环境设置，布局，网格系统，内容，组件，实用程序，Bootstrap 3和4之间的差异。

描述

使用 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 : 的基本结构;

...

网格系统示例

以下是Bootstrap 4网格系统的示例 :

示例

                                             Bootstrap 4 Example               .grid_system  div[class^="col"] {            border: 1px solid white;            background: #e4dcdc;            text-align: center;            padding-top: 5px;            padding-bottom: 5px         }                                          .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1            .col-sm-1                                       .col-sm-3            .col-sm-3            .col-sm-3            .col-sm-3                                       .col-sm-4            .col-sm-4            .col-sm-4                                       .col-sm-3            .col-sm-3            .col-sm-6                                       .col-sm-5            .col-sm-7                                       .col-sm-6            .col-sm-6                                       .col-sm-12

创建两个列布局

以下示例描述了为小型，中型和大型设备创建两个列布局。在移动电话等小型设备上，列默认会自动变为水平。

示例

                                             Bootstrap 4 Example                                    .col-sm-6            .col-sm-6                                       .col-sm-7            .col-sm-5                                       .col-sm-4            .col-sm-8                               .col-sm-9            .col-sm-3

创建三列布局

以下示例描述了为中型和大型设备创建三个列布局。如果屏幕分辨率大于或等于992像素，则它将以平板模式显示在平板电脑中，并且像往常一样，它将以纵向模式显示。

示例

                                             Bootstrap 4 Example                                    .col-sm-4            .col-sm-4            .col-sm-4                                       .col-sm-3            .col-sm-4            .col-sm-5                                       .col-sm-2            .col-sm-8            .col-sm-2                              .col-sm-2            .col-sm-3            .col-sm-7