Bootstrap网格系统用于布局，特别是响应式布局。了解它的工作原理对于理解Bootstrap至关重要。网格是由一个或多个容器内的行和列的分组组成的。

目录:

1. Bootstrap网格的基础知识
2. 容器
3. 行和列
4. Bootstrap列可以做的所有事情
5. 如何用Bootstrap进行响应式设计？
6. 使用网格进行响应式设计的关键点

让我们开始学习Bootstrap中的网格系统。

Bootstrap网格的基础知识

Bootstrap网格可以单独使用，不需要Bootstrap JavaScript和其他CSS组件。你只需要下载并引用"bootstrap-grid.css"，其中包括grid和flexbox类。

使用网格的基本例子:

<div class="container"> 
    <div class="row">
        <div class="col">
            Content inside the grid.
        </div> 
    </div>
</div>

这给了我们一个横跨视口的大 "列":

两列布局

<div class="container"> 
    <div class="row">
        <div class="col">Left column</div> 
        <div class="col">Right column</div> 
    </div>
</div>

三列式布局

<div class="container"> 
    <div class="row">
        <div class="col">Left column</div> 
        <div class="col">Middle column</div> 
        <div class="col">Right column</div> 
    </div>
</div>

基本的网格概念很容易理解，但有些人可能会想，为什么这些HTML标记都是必要的。你可能会有一些问题，比如:

• 为什么我需要一个容器？
• 我可以让一列比其他列宽吗？
• 我需要使用行吗？

诸如此类的网格问题将在下文中进一步讨论。但首先我们要退一步，了解一些关于使用网格的重要知识。了解 "网格规则 "将为你节省大量的时间和挫折。

网格系统的规则

1. 列必须是行的直接子节点。
2. 行只用于包含列。
3. 行应该被放在一个容器内。

这些规则是最重要的。行和列总是一起工作，不应该在没有彼此的情况下使用。

容器

在前面的例子中，你可能已经注意到.container类是用来包裹.row的。容器是Bootstrap网格的根元素:

<div class="container">  
    <div class="row">  
        <div class="col">Content inside the grid.</div> 
    </div>  
</div>

容器不仅用于网格的行和列。它可以用来容纳任何元素和内容。例如，这就是完全有效的Bootstrap标记:

<div class="container"> 
    <h2> My Heading</h2>  
    <div class="row">  
        <div class="col">Content inside the grid.</div>  
    </div> 
</div>

容器看起来微不足道或没有必要，但它对控制布局的宽度非常重要。容器也被用来在浏览器的视口内均匀地排列布局的左和右边缘。

Bootstrap有2种类型的容器：.container和全宽的.container-fluid。我们可以使用这两种中的任何一种:

1. 固定宽度的容器用于将你的布局放在中间位置。

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

2. 全宽的容器用于横跨整个宽度的布局。

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

.container的宽度会响应地缩小（随着屏幕宽度的缩小），所以最终会像.container-fluid一样在小设备上变成全宽。

当使用网格时，可以在容器内多放一排。我们可以在一个容器里有多个行，在一个页面上有多个容器。这都取决于我们要完成什么样的布局。

行有一个-15px的左/右负边距。容器的15px的填充是用来抵消行的负边距的。这是为了让内容在布局的边缘上保持均匀的排列。如果我们不把行放在一个容器里，行就会溢出它的容器，造成不理想的水平滚动。

行和列

请注意，我们把 "行和列 "归为一个部分。这是因为正如前面 "网格规则 "中所解释的那样，我们不能有一个没有另一个。

当我们想到 "行 "时，我们可能会想到水平线，这没有问题，但是，最好把.行简单地看作是列的父级。一行是一组列，因为.row里面的列并不总是在视口中水平布局的。有些时候我们希望列的布局是水平的，而有些时候我们希望列在视口中垂直布局。水平与垂直布局的概念是响应式设计的本质。行 "的唯一目的是要包含1个或多个 "列"。

不要把内容直接放在行的里面!

错误的方式:

<div class="row">Row content.</div>
<div class="row">
    <p>Row content.</p>
</div>
<div class="row">
    <h2>Row content.</h2>
</div>

正确的方式:

<div class="row">
    <div class="col">Column content.</div>
</div>

同样重要的是要提到，.row是显示：flex。作为flexbox的孩子，每一行的列都是一样的高度。因为有了flexbox，使用bootstrap的flex和auto-margin实用类很容易实现水平和垂直对齐。现在是时候深入研究行和列了，以及它们到底是如何一起工作的。有不同类型的列，以及在我们的布局中使用它们的不同方式。

Bootstrap列可以做的所有事情

• 在整个视口中创建水平划分。
• 可以有不同的定义宽度。
• 可以在不同的屏幕宽度下改变宽度。
• 从左到右水平布局，然后从上到下垂直布局。
• 可以相对于同一行的兄弟姐妹改变位置。
• 与同一行中的兄弟姐妹的高度相同。
• 可以在宽度上增长或缩减。
• 可以根据需要自动垂直包装或堆叠，或以不同的宽度包装。
• 可以包含更多的行和列。这就是所谓的嵌套。

列在整个视口中形成水平划分。列之间的空间被称为 "天沟"。

经典的Bootstrap网格有12个列单元。

列可以被均匀地划分为12个因子。

列可以用12个单元中的任何一部分来分割。使用少于12的单元是可以的。使用多于12也是可以的，我们以后会看到。

有了所有这些灵活性，布局的可能性似乎是无穷无尽的。

但是，网格并不总是关于12。感谢Flexbox，Bootstrap有新的 "自动布局 "列。这些无单元的列在设计布局时给你带来了更多的灵活性。

如何用Bootstrap进行响应式设计？

说到响应式设计，Bootstrap Grid的行和列是 "主角"。

Bootstrap的响应性断点（基于屏幕宽度）:

• xs - 屏幕宽度< 576px (这是 "默认 "层)
• sm - 屏幕宽度≥576px
• md - 屏幕宽度≥768px
• lg--屏幕宽度≥992px
• xl--屏幕宽度≥1200px

Bootstrap使用CSS媒体查询来建立这些响应式断点。
例如：这里有两列，每列宽度为50%：

<div class="container">
    <div class="row">
        <div class="col-sm-6">Column 1</div>
        <div class="col-sm-6">Column 2</div>
    </div>
</div>

col-sm-6意味着在典型的小设备宽度（大于或等于768px）上，使用12列中的6列宽（50%）。

在小于768px的情况下，2列会变成100%的宽度，并在垂直方向上堆叠。

这是因为xs是默认或暗示的断点。由于我们没有指定默认的列宽，50%的宽度只在768px和更宽的sm断点上应用。

由于（xs）是默认断点，col-12是隐含的。所以这个：

<div class="col-12 col-sm-6">Column</div>

实际上和这个是一样的：

<div class="col-sm-6">Column</div>

关于使用网格的响应式设计的关键点

除非我们在HTML标记中使用特定的col-*类，否则在较小的屏幕宽度上，列会垂直堆叠（并变成全宽）。使用特定的col-*来防止这种垂直堆叠。

较小的网格类也适用于较大的屏幕，除非专门为较大的屏幕宽度进行重写。因此，<div class="col-md-6"></div> 实际上与<div class="col-md-6 col-lg-6"></div> 相同。因此，我们只需要使用我们想要支持的最小宽度的类。

行是display:flex，因此列在同一行中是等高的。使用auto-margins或flexbox align-items和justify-content进行水平或垂直对齐。

通过OpenGenus的这篇文章，你一定对Bootstrap的网格系统有了完整的认识。