5.6.2 响应式浮动

可以在网格不相同的视口断点上来设置元素不同的浮动。例如，在小型设备（sm）上设置右浮动，可添加.float-sm-right类来实现；在中型设备（md）上设置左浮动，可添加.float-md-left类来实现。

.float-sm-right和.float-md-left称为响应式的浮动类。Bootstrap 4支持的响应式的浮动类说明如下。

■ .float-sm-left：在小型设备上（sm）向左浮动。

■ .float-sm-right：在小型设备上（sm）向右浮动。

■ .float-md-left：在中型设备上（md）向左浮动。

■ .float-md-right：在中型设备上（md）向右浮动。

■ .float-lg-left：在大型设备上（lg）向左浮动。

■ .float-lg-right：在大型设备上（lg）向右浮动。

■ .float-xl-left：在超大型设备上（xl）向左浮动。

■ .float-xl-right：在超大型设备上（xl）向右浮动。

在下面的示例中，使用响应式的浮动类实现了一个简单布局。box2和box3只有在中型设备及更大的设备中才会浮动。

【例5.21】响应式浮动示例。

在IE 11浏览器中运行，在中屏以下设备上显示效果如图5-23所示，在中屏及以上设备显示效果如图5-24所示。

图5-23 在中屏以下设备上显示效果

图5-24 在中屏及以上设备上显示效果