宽度 · Bootstrap 6.0 中文文档

类名	样式
.w-1	width: 1rem;
.w-2	width: 2rem;
.w-3	width: 3rem;
.w-4	width: 4rem;
.w-5	width: 5rem;
.w-6	width: 6rem;
.w-7	width: 7rem;
.w-8	width: 8rem;
.w-9	width: 9rem;
.w-10	width: 10rem;
.w-11	width: 11rem;
.w-12	width: 12rem;
.w-25	width: 25%;
.w-50	width: 50%;
.w-75	width: 75%;
.w-100	width: 100%;
.w-auto	width: auto;
.w-min	width: min-content;
.w-max	width: max-content;
.w-fit	width: fit-content;
.最大宽度-100	max-width: 100%;
.min-w-0	min-width: 0;
.min-w-100	min-width: 100%;
.vw-100	width: 100vw;
.min-vw-100	min-width: 100vw;
.dvw-100	width: 100dvw;
.min-dvw-100	min-width: 100dvw;

使用宽度工具类设置元素的宽度。宽度工具类由工具类 API 生成，并支持预设比例、百分比值、内在尺寸关键字和视口单位。

宽度

使用设置宽度 .w-{size} 适用于任何尺寸的公用设施 1 到 12. 这些类是根据工具类 API 生成的 $sizes 映射到 _config.scss. 每个数字都是……的倍数 $spacer 变量，默认值为 1rem.

宽度 12

HTML

<div class="d-flex flex-column gap-3">
  <div class="w-1">…</div>
  <div class="w-2">…</div>
  <div class="w-3">…</div>
  <div class="w-4">…</div>
  <div class="w-5">…</div>
  <div class="w-6">…</div>
  <div class="w-7">…</div>
  <div class="w-8">…</div>
  <div class="w-9">…</div>
  <div class="w-10">…</div>
  <div class="w-11">…</div>
  <div class="w-12">…</div>
</div>

相对宽度

使用基于百分比的工具将宽度设置为相对于父元素。默认情况下包括对 25%、50%、75%、100% 和 auto 的支持。

宽度 25%

宽度 50%

宽度 75%

宽度 100%

宽度自动

HTML

<div class="w-25 p-3">Width 25%</div>
<div class="w-50 p-3">Width 50%</div>
<div class="w-75 p-3">Width 75%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>

固有尺寸

使用内在尺寸关键字根据内容设置宽度。

宽度最小内容

宽度最大内容

宽度适应内容

HTML

<div class="w-min p-3">Width min-content</div>
<div class="w-max p-3">Width max-content</div>
<div class="w-fit p-3">Width fit-content</div>

最大宽度

使用 max-width 工具设置最大宽度。

最大宽度 100%

HTML

<div style="width: 50%;">
  <div class="max-w-100" style="width: 200%;">Max-width 100%</div>
</div>

最小宽度

使用 min-width 工具设置最小宽度。

此内容的宽度超过了 min-width: 0 的容器

最小宽度 100%

HTML

<div class="min-w-0 p-3" style="overflow: hidden;">
  <div style="width: 200px;">This content is wider than the min-width: 0 container</div>
</div>
<div class="min-w-100 p-3">Min-width 100%</div>

视口宽度

使用视口单位设置相对于视口的宽度。

HTML

          <div class="vw-100">Width 100vw</div>
<div class="min-vw-100">Min-width 100vw</div>

注意视口宽度！ CSS 将 vw 计算为滚动条不存在的情况。在显示经典滚动条的桌面浏览器上，vw-100 比内容区域宽，因此页面会横向滚动。请使用 w-100 来填充父元素。参见动态视口宽度。

动态视口宽度

vw 单位用于测量大视口宽度。浏览器将该宽度计算为假设所有可收缩的浏览器界面都已收起的情况。该值在用户滚动时保持不变。

dvw 单位测量用户当前看到的视口宽度。当浏览器扩展或收回浏览器界面时，浏览器会更新该值。当浏览器界面改变视口宽度时，使用 dvw-100 和 min-dvw-100。

HTML

          <div class="dvw-100">Width 100dvw</div>
<div class="min-dvw-100">Min-width 100dvw</div>

大多数浏览器将可收缩界面放置在屏幕的顶部和底部。该界面会改变视口高度，而不是视口宽度。在这些浏览器上，dvw 和 vw 会给出相同的值。因此，dvw 单位比 dvh 用处小。我们提供它是为了让宽度工具类与高度工具类相匹配。

dvw 无法解决滚动条问题。 CSS 将每个视口宽度单位的大小计算为好像滚动条不存在一样。dvw 单位和 vw 单位的处理方式相同。要使这些单位考虑滚动条，在根元素上设置 overflow: scroll 或 scrollbar-gutter: stable。

我应该使用哪种单位？ 对于全宽布局，请使用w-100。它会填充父元素，因此页面不会水平滚动。当浏览器界面改变视口宽度时，请使用dvw。当你需要一个在用户滚动时不变化的宽度时，请使用vw。

小和大视口单位

CSS 为你提供了另外两个视口宽度单位：

svw 是小视口宽度。浏览器计算它时，假设每个可收缩的浏览器界面都已展开。
lvw 是大视口宽度。浏览器计算它时，假设每个可收缩的浏览器界面都已收起。当前浏览器给 vw 相同的值。

我们不为 svw 和 lvw 提供工具类包，因为大多数布局需要 w-100 或 dvw。可以使用 utilities API 添加它们：

SCSS

          // my-bootstrap.scss
@use "bootstrap/scss/bootstrap" with (
  $utilities: (
    "small-viewport-width": (
      property: width,
      class: svw,
      values: (100: 100svw)
    ),
    "min-small-viewport-width": (
      property: min-width,
      class: min-svw,
      values: (100: 100svw)
    ),
    "large-viewport-width": (
      property: width,
      class: lvw,
      values: (100: 100lvw)
    ),
    "min-large-viewport-width": (
      property: min-width,
      class: min-lvw,
      values: (100: 100lvw)
    )
  )
);

这会添加 .svw-100、.min-svw-100、.lvw-100 和 .min-lvw-100。

Bootstrap 6 支持的每个浏览器都有 dvw、svw 和 lvw。请阅读浏览器与设备以了解完整的支持政策。

CSS

Sass 工具 API

宽度工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

scss/_utilities.scss

"width": (
  property: width,
  class: w,
  values: map.merge(
    $sizes,
    (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto,
      min: min-content,
      max: max-content,
      fit: fit-content,
    )
  )
),
"max-width": (
  property: max-width,
  class: max-w,
  values: (100: 100%)
),
"min-width": (
  property: min-width,
  class: min-w,
  values: (
    0: 0,
    100: 100%
  )
),
"viewport-width": (
  property: width,
  class: vw,
  values: (100: 100vw)
),
"min-viewport-width": (
  property: min-width,
  class: min-vw,
  values: (100: 100vw)
),
"dynamic-viewport-width": (
  property: width,
  class: dvw,
  values: (100: 100dvw)
),
"min-dynamic-viewport-width": (
  property: min-width,
  class: min-dvw,
  values: (100: 100dvw)
),