freeCodeCamp/guide/chinese/bootstrap/grid-system/index.md

title	localeTitle
Grid System	网格系统

网格系统

简而言之，Bootstrap网格系统可帮助您创建响应式布局，它包含一个行和列系统，可帮助您构建内容。

行是水平的列组，每行最多12列。在每行中，内容放置在列内，并且可以跨越1到12列之间的任何位置。

Bootstrap有五种不同类型的网格层，即Extra small，Small，Medium，Large和Extra large，为每个网格层定义了一个断点。

Bootstrap使用像素来定义网格层断点，作为网格层断点的不同视口宽度为：

怎么运行的

容器

容器是_包含_网格的最外层元素，在屏幕中间使用container作为固定宽度的容器（大屏幕上的额外边距）或container-fluid的全宽度。

<div class="container"></div> 

行

使用row对row进行分组，这将使所有内容保持正确排列并帮助您构建网格。

<div class="row"></div> 

列

列类指示您希望在每行可能使用的12列中使用的列数。例如col-sm-6将意味着你的专栏将使用了宽度的一半row在小屏幕上，和col-lg-4将使用了大屏幕上的三分之一。

以下是如何定义类前缀以在各种屏幕尺寸上使用一个列宽：

• 超小 col-1
• 小 col-sm-1
• 中等 col-md-1
• 大 col-lg-1
• 超大 col-xl-1

<div class="col-sm-1"></div> 

例

一个全宽网格，有四列，每个列在xs屏幕上占据整行，在sm和md屏幕上占据半行，在大屏幕和上面的屏幕上占据行宽度的四分之一。

<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-12 col-sm-6 col-lg-4">First Column</div> 
    <div class="col-12 col-sm-6 col-lg-4">Second Column</div> 
    <div class="col-12 col-sm-6 col-lg-4">Third Column</div> 
    <div class="col-12 col-sm-6 col-lg-4">Forth Column</div> 
  </div> 
 </div> 

请注意，未定义col-md和col-xl ，其中未定义大小，它将默认为下一个已指定的较小大小。

Bootstrap提供了一个现成的12列网格系统，用于布局。请考虑以下代码。

   <div class="container"> 
    <div class="row"> 
        <div class="col-md-6">Content</div> 
        <div class="col-md-6">Content</div> 
    <div> 
   </div> 

哪里：

- col = column 
 - md = screen size 
 - 6 = column width 

作为12列网格系统，所有用户定义的网格列宽度必须最多为12。

屏幕尺寸值可以分配如下：

• xs - <768px手机

• sm - <992px平板电脑

• md - <1200px笔记本电脑

• lg - > 1200px台式机

  Bootstrap首先是移动的并且响应迅速。

  移动优先意味着网格布局将自动响应较小的屏幕。然后，HTML定义更大屏幕的网格布局。

以下代码和图像显示了使用不同列宽的可能性。

    <div class="container"> 
        <div class="row"> 
            <div class="example col-md-6">Content</div> 
            <div class="example col-md-6">Content</div> 
        <div> 
    </div> 
 
    <div class="container"> 
        <div class="row"> 
            <div class="example col-md-4">Content</div> 
            <div class="example col-md-4">Content</div> 
            <div class="example col-md-4">Content</div> 
        <div> 
    </div> 
 
    <div class="container"> 
        <div class="row"> 
            <div class="example col-md-3">Content</div> 
            <div class="example col-md-3">Content</div> 
            <div class="example col-md-3">Content</div> 
            <div class="example col-md-3">Content</div> 
        <div> 
    </div> 
 
    <div class="container"> 
        <div class="row"> 
            <div class="example col-md-2">Content</div> 
            <div class="example col-md-2">Content</div> 
            <div class="example col-md-2">Content</div> 
            <div class="example col-md-2">Content</div> 
            <div class="example col-md-2">Content</div> 
            <div class="example col-md-2">Content</div> 
        <div> 
    </div> 
 
    <div class="container"> 
        <div class="row"> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
            <div class="example col-md-1">Content</div> 
        </div> 
    </div> 

更多信息：

Bootstrap Docs - 网格系统

本指南基于Bootstrap v4（它将与v3一起使用，除了额外的小屏幕定义为xs且没有xl大小）

• 超大： 视口宽度> = 1200px
• 大： 视口宽度> = 992px
• 中： 视口宽度> = 768px
• 小： 视口宽度> = 576px
• 超小： 视口宽度低于576px

更多信息：

https://getbootstrap.com/docs/4.0/layout/grid/