在本教程中，我们将了解有关Bootstrap中各列的更多信息。

在上一教程中，我们了解了容器和网格系统，以及如何使用不同的列类(例如.col-xs-、. col-sm-、. col-md-和.col -lg-)创建列。

各种列

在下面的示例中，我们将创建3个宽度可变的列。
第一个div占用6列。
第二个占用4列，最后一个占用2列。

<div class="row">

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

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

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

</div>

我正在使用.my-col类来设置列的样式。

抵消列

为了使列向右移动，我们使用以下类：.col-xs-offset-* 、. col-sm-offset-* 、. col-md-offset- *和.col-lg- offset- *，其中*可以是1到12之间的任何整数值。

在下面的示例中，我们将第一个div的偏移量设置为1列。
与第二个div偏移2列。

第一个div占用3列，第二个div占用6列。

要保留在一行中，列值和偏移值必须加到12。

<div class="row">

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

	<div class="col-xs-6 col-xs-offset-2 col-sm-6 col-sm-offset-2 col-md-6 col-md-offset-2 col-lg-6 col-lg-offset-2 my-col">Div 2</div>

</div>

将列和列偏移量相加得到12。

嵌套列

我们甚至可以在Bootstrap中嵌套列。
在下面的示例中，我们有两个父div，分别包含4列和8列。
在第一个父div内，我们有4个div，每个div占用3列。
在第二个父div内，我们有6个div，每个div占用2列。

<div class="row">

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

		<div class="row">
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 1</div>

			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 2</div>

			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 3</div>

			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 4</div>
		</div>

	</div>

	<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 my-col">
		
		<p>Div 2</p>

		<div class="row">
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 1</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 2</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 3</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 4</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 5</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 6</div>
		</div>

	</div>

</div>

我正在使用.my-col和.my-sub-col类来设置div的样式。

排序列

我们可以使用.col-*-pull- *和.col-*-push- *类来改变列的顺序。

在下面的示例中，我们在一行中有两列，并使用排序类对其进行排序。

<div class="row">

	<div class="col-md-8 col-md-push-4 my-col">
		Div 1
	</div>

	<div class="col-md-4 col-md-pull-8 my-col">
		Div 2
	</div>

</div>