📌  相关文章
📜  Bootstrap 4-网格系统

📅  最后修改于: 2020-10-26 04:31:05             🧑  作者: Mango

描述

使用flexbox构建的Bootstrap 4网格系统具有完全响应能力，并通过在页面上创建具有行和列的布局，可扩展至12列（根据设备的大小）。它提供了响应迅速的移动式第一流体网格系统，该系统可随着设备或视口尺寸的增加而缩放列。

网格系统的工作

  • 必须将行放置在.container类内，以便正确对齐和填充。

  • 对于响应宽度，请使用.container类；对于所有视口中的固定宽度，请使用.container-fluid类。

  • 使用行创建水平的列组。

  • 内容应放在列中，并且只有列可以是行的直接子代。

  • 列包含用于控制它们之间空间的填充。

  • 如果您连续放置超过12列，则这些列将被换行。

  • 列通过填充在列内容之间创建间隙。因此，您可以在行上使用.no-gutters类删除行的边距和列的填充。

  • 您可以通过使用五个网格断点来使网格系统响应，例如，超小型，小型，中型，大型和超大型。

  • 预定义的网格类（例如.col-4）可用于快速制作网格布局。 LESS mixin也可以用于更多的语义布局。

网格选项

下表总结了Bootstrap 4网格系统如何跨多个设备工作的各个方面-

Extra small devices (<576px) Small devices (≥576px) Medium devices (≥768px) Large devices (≥992px) Extra Large devices (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class classes .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12 12 12 12 12
Gutter width

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)
Nestable Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes

基本网格结构

以下是Bootstrap 4网格的基本结构-


   

      

      

   

   
   

      

      

      
      
   

   
   
...

网格系统示例

以下是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

它将产生以下结果-

输出