如何让Bootstrap 5的尺寸工具实现响应式效果？

要实现你需要的「视口小于md断点时卡片全宽，md及以上宽度为父元素的75%」效果，直接使用Bootstrap 5的响应式尺寸类即可，语法是在基础尺寸类前添加断点前缀，遵循移动优先原则。

正确的类组合 #

给卡片元素同时添加 w-100 和 md:w-75 两个类：

• w-100：默认应用于所有屏幕（包括小于md的视口），设置宽度为100%
• md:w-75：仅在视口宽度≥md断点（默认768px）时生效，覆盖w-100，设置宽度为父元素的75%

完整代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<div class="card w-100 md:w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

扩展说明 #

Bootstrap 5的所有工具类（包括尺寸、间距、颜色等）都支持响应式变体，可用的断点前缀有：

• sm-：≥576px
• md-：≥768px
• lg-：≥992px
• xl-：≥1200px
• xxl-：≥1400px

你可以根据需求组合不同断点的类，比如要实现「sm及以上宽度50%，lg及以上宽度75%」，就用 w-100 sm:w-50 lg:w-75。

内容的提问来源于stack exchange，提问作者Mark