如何在Bootstrap的Flex项目之间添加连接线？

要给你的Flex树形结构添加连接线，Bootstrap没有内置相关组件，需要通过自定义CSS结合伪元素来实现。下面是调整后的完整代码：

修改后的HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="tree-row d-flex justify-content-around">
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="tree-item p-2 bd-highlight border border-primary">Flex item 1</div>
</div>

自定义CSS #

/* 树形行容器，作为伪元素定位上下文 */
.tree-row {
  position: relative;
  margin-bottom: 2rem; /* 调整上下层间距，给连接线预留空间 */
}

/* 绘制每层内部的水平连接线 */
.tree-row::before {
  content: '';
  position: absolute;
  top: -1rem;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: #0d6efd; /* 和Bootstrap primary边框颜色一致 */
}

/* 树形项容器，作为垂直连接线的定位上下文 */
.tree-item {
  position: relative;
}

/* 绘制每个项到下一层的垂直连接线 */
.tree-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1rem;
  background-color: #0d6efd;
}

/* 移除最后一行的水平和垂直连接线 */
.tree-row:last-child::before,
.tree-row:last-child .tree-item::after {
  display: none;
}

说明 #

• 给每层的Flex容器添加tree-row类，用于定位水平连接线；给每个Flex项添加tree-item类，用于定位垂直连接线。
• 通过伪元素::before绘制每层内部的水平线条，::after绘制每个项到下一层的垂直线条。
• 使用Bootstrap的primary颜色（#0d6efd）保持风格统一，可根据需求修改颜色值。
• 调整了margin-bottom和线条长度，确保连接线和项的位置对齐，可根据实际布局调整数值。

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