在本教程中，我们将学习有关Bootstrap容器和网格系统的信息。

容器

在Bootstrap中，要求将内容和网格系统包装在一个容器中。

我们使用Bootstrap提供的两个类创建容器。

如果我们想要一个响应性的固定宽度容器，我们使用.container。

<div class="container">

	<!-- some more html goes here -->
	
</div>

如果我们想要响应的全角容器占用视口的整个宽度，则使用.container-fluid。

<div class="container-fluid">

	<!-- some more html goes here -->
	
</div>

容器不得嵌套。

网格系统

我们使用Bootstrap网格系统创建行和列来容纳内容。

以下是创建网格系统时必须牢记的几点。

• 我们使用.row为列创建水平组。

• 必须将行放在.container(固定宽度)或者.container-fluid(全角)内，以便正确对齐和填充。

• 只有列.col-*可以是该行的直接子代。

• 内容必须放在列内。

• 每列都通过填充具有装订线(列内容之间的间隙)。

• 一行可以包含12列。

• 如果一行中有超过12列，则多余的列将换行。

• 要创建列，我们使用.col-xs-12和.col-sm-4等类。

网格选项

如果我们希望div取1列，则将1附加到.col-xs-1之类的类中。

创建容器，行和列

在下面的示例中，我们将创建一个具有单行和12列的容器。

在一个额外的小型设备中，每个div将占用12列。
因此，我们将.col-xs-12类提供给div。

在小型设备中，每个div将占用3列。
因此，我们将.col-sm-3类提供给div。

在中型设备中，每个div将占用2列。
因此，我们将.col-md-2类提供给div。

对于大型设备，每个div将占用1列。
因此，我们将.col-lg-1类提供给div。

<div class="container-fluid">

	<div class="row">

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 1</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 2</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 3</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 4</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 5</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 6</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 7</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 8</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 9</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 10</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 11</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 12</div>

	</div>

</div>