5.1.1 文本对齐

在Bootstrap中定义了以下4个类，来设置文本的水平对齐方式。

■ .text-left：设置左对齐。

■ .text-center：设置居中对齐。

■ .text-right：设置右对齐。

■ .text-justify：设置两端对齐。

在下面的示例中，定义3个div，为每个div分别设置text-left、text-center和text-right类，实现不同的对齐方式。其中border类用来设置div的边框。

【例5.1】文本对齐示例。

在IE 11浏览器中运行结果如图5-1所示。

可以结合网格系统的响应断点来定义响应的对齐方式。说明如下。

■ .text-(sm|md|lg|xl)-left：在sm|md|lg|xl型设备上左对齐。

■ .text-(sm|md|lg|xl)-center：在sm|md|lg|xl型设备上居中对齐。

■ .text-(sm|md|lg|xl)-right：在sm|md|lg|xl型设备上右对齐。

在下面的示例中，定义1个div，并添加text-sm-center类，该类表示在sm（576px≤sm<768px）型宽度的设备上显示为水平居中；添加的text-md-right类，表示在md（68px≤md<992px）型宽度的设备上显示为右对齐。

【例5.2】响应式对齐示例。

在IE 11浏览器中运行时，在sm型设备上显示效果如图5-2所示。

在md型设备上显示效果如图5-3所示。