分隔线

示例

与其在单个子元素上添加边框类，不如在父元素上使用.divide-x或.divide-y。

<div class="d-flex divide-x">
  <div class="px-3 py-2">Item 1</div>
  <div class="px-3 py-2">Item 2</div>
  <div class="px-3 py-2">Item 3</div>
</div>

为分隔符工具生成的选择器被包装在:where()中，表示零特异性，使它们易于通过额外的工具或自定义 CSS 来覆盖。

水平

使用 .divide-x 在水平排列的子元素之间添加垂直边框线：

<div class="d-flex divide-x rounded-3 border">
  <div class="px-4 py-3">One</div>
  <div class="px-4 py-3">Two</div>
  <div class="px-4 py-3">Three</div>
</div>

垂直

使用 .divide-y 在垂直堆叠的子元素之间添加水平边框线：

<div class="divide-y rounded-3 border d-inline-block">
  <div class="px-4 py-3">One</div>
  <div class="px-4 py-3">Two</div>
  <div class="px-4 py-3">Three</div>
</div>

移除分隔线

使用 .divide-x-0 或 .divide-y-0 来移除分隔符，这在特定断点尤其有用：

          <div class="divide-y divide-y-md-0 divide-x-md">
  ...
</div>
        

它是如何工作的

分摊工具类费用 border-inline-start 或者 border-block-start 通过选择器选择除第一个之外的每个直接子元素 :where(.divide-y > :not(:first-child)). 这个 :where() 包装器将特异性保持为零。边框样式由现有的控制 --border-width, --border-style，和 --border-color CSS 变量。

          :where(.divide-y > :not(:first-child)) {
  border-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
        

CSS

Sass 工具 API

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

"divide-x": (
  responsive: true,
  property: border-inline-start,
  class: divide-x,
  child-selector: "> :not(:first-child)",
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"divide-y": (
  responsive: true,
  property: border-block-start,
  class: divide-y,
  child-selector: "> :not(:first-child)",
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),