1. 容器（Container）：
使用 .container-xl 类可以创建一个适用于超大屏幕的固定宽度容器：
<div class="container-xl">
<!-- 页面内容 -->
</div>
如果你想要一个全宽度的容器，可以使用 .container-fluid：
<div class="container-fluid">
<!-- 页面内容 -->
</div>
2. 栅格系统：
在栅格系统中，你可以使用 .col-xl-* 类来定义在超大屏幕上的列宽。例如，下面的代码将在超大屏幕上占据四分之一的宽度：
<div class="col-xl-3">
<!-- 列内容 -->
</div>
3. 显示和隐藏：
使用以下类可以根据屏幕尺寸显示或隐藏元素：
- .d-xl-none：在超大屏幕及以上尺寸隐藏元素。
- .d-xl-inline：在超大屏幕及以上尺寸以行内元素显示元素。
- .d-xl-inline-block：在超大屏幕及以上尺寸以行内块元素显示元素。
- .d-xl-block：在超大屏幕及以上尺寸以块级元素显示元素。
示例：
<div class="d-xl-none">
<!-- 在超大屏幕及以上尺寸隐藏的元素 -->
</div>
更多类似 .d-*-none、.d-*-inline、.d-*-inline-block、.d-*-block 可以用于其他屏幕尺寸的显示和隐藏。
4. 文本显示和隐藏：
使用 .d-xl-inline, .d-xl-inline-block, .d-xl-block, .d-xl-table, .d-xl-table-cell, .d-xl-table-row 等类可以根据超大屏幕的尺寸来设置文本的显示和隐藏。
示例：
<p class="d-xl-inline">This is inline text on extra-large screens.</p>
以上是一些在 Bootstrap 4 中用于超大屏幕的响应式类。你可以根据具体的需求在不同的元素上应用这些类来实现适应超大屏幕的设计。确保查阅 [Bootstrap 4 文档中的 Responsive 部分](https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints) 以获取更多详细的信息和选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5487/Bootstrap