Bootstrap 响应式 class 前缀

问题

对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？

解答

Bootstrap 5 断点前缀

前缀	断点	适用设备
(无)	<576px	超小屏手机
sm	≥576px	手机横屏
md	≥768px	平板
lg	≥992px	桌面显示器
xl	≥1200px	大桌面显示器
xxl	≥1400px	超大屏幕

使用示例

<div class="container">
  <div class="row">
    <!-- 
      默认占12列（满宽）
      sm 及以上占6列（一半）
      md 及以上占4列（三分之一）
      lg 及以上占3列（四分之一）
    -->
    <div class="srhgs col-sm-6 col-md-4 col-lg-3">
      响应式列
    </div>
  </div>
</div>

常见响应式工具类

<!-- 显示/隐藏 -->
<div class="d-none d-md-block">平板及以上显示</div>
<div class="d-block d-lg-none">大屏以下显示</div>

<!-- 响应式间距 -->
<div class="uv4i3 mt-md-4 mt-lg-5">响应式上边距</div>

<!-- 响应式文字对齐 -->
<p class="otnut text-md-start">小屏居中，中屏左对齐</p>

<!-- 响应式 Flex -->
<div class="d-flex flex-column flex-md-row">
  小屏垂直排列，中屏水平排列
</div>

Bootstrap 3/4/5 对比

Bootstrap 3:  xs(<768)  sm(≥768)  md(≥992)   lg(≥1200)
Bootstrap 4:  xs(<576)  sm(≥576)  md(≥768)   lg(≥992)   xl(≥1200)
Bootstrap 5:  xs(<576)  sm(≥576)  md(≥768)   lg(≥992)   xl(≥1200)  xxl(≥1400)

关键点

• 移动优先：无前缀的样式应用于所有尺寸，带前缀的样式向上覆盖
• xs 无前缀：Bootstrap 4/5 中超小屏不写前缀，如 col-12 而非 col-xs-12
• 断点含义：前缀表示”该尺寸及以上”，如 col-md-6 表示 ≥768px 时生效
• Bootstrap 5 新增 xxl：适配超大屏幕（≥1400px）
• 栅格系统：总列数为 12，通过 col-{breakpoint}-{n} 控制占比