5.7.2 响应式的隐藏或显示元素

可以按不同的设备来响应式地显示和隐藏元素。为同一个网站创建不同的版本，应针对每个屏幕大小来隐藏和显示元素。

若要隐藏元素，只需使用.d-none类或.d-{sm、md、lg或xl}-none响应屏幕变化的类。若要在给定的屏幕大小间隔上显示元素，可以组合.d-*-none类和.d-*-*类，例如.d-none .d-md-block .d-xl-none类，将隐藏除中型和大型设备以外的所有屏幕大小的元素。在实际开发中，可以根据需要自由组合显示和隐藏的类，经常使用的组合类如表5-1所示。

表5-1

在下面的示例中定义了两个div，蓝色背景色的div在小屏设备上显示，在中屏及以上设备上隐藏；红色背景色的div恰好与之相反。

【例5.23】响应式的隐藏或显示示例。

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

图5-26 小屏设备上显示效果

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