如何用ReactJS、CSS及Bootstrap实现响应式自定义多列UI组件？

一、核心布局思路 #

基于Bootstrap网格系统搭建等间距列布局，配合自定义CSS实现分隔符与对齐规则：

• 用row gx-4（或自定义间距类）控制列间水平间距，保证等距分布
• 每个列容器添加d-flex flex-column，让内容垂直排列并默认左对齐
• 为列设置position-relative，通过CSS伪元素生成分隔线，避免额外DOM节点

二、列分隔符实现 #

给除最后一列外的所有列添加右侧垂直分隔线，用伪元素实现：

.col-separator:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 60%; /* 可根据设计调整高度 */
  width: 1px;
  background-color: #e0e0e0; /* 分隔线颜色 */
}

只需在列组件上添加col-separator position-relative类即可生效。

三、内容换行与防溢出处理 #

• 列内标签和内容用d-flex flex-column align-items-start强制左对齐，文本默认自动换行
• 给列设置min-width: 200px，避免小屏幕下内容过度挤压
• 禁用white-space: nowrap，让文本在列宽不足时自然换行，配合Bootstrap的col自动适配宽度，防止溢出

四、完整代码示例 #

React组件代码 #

import React from 'react';
import './CustomComponent.css';

const InfoComponent = () => {
  const items = [
    { label: '订单编号', content: 'ORD-123456789' },
    { label: '客户名称', content: '张三的超级长客户名称测试文本，用于验证换行效果' },
    { label: '创建时间', content: '2024-05-20 14:30:00' },
    { label: '状态', content: '已完成' }
  ];

  return (
    <div className="container-fluid py-3">
      <div className="row gx-4">
        {items.map((item, index) => (
          <div key={index} className="col col-separator position-relative d-flex flex-column align-items-start">
            <span className="text-muted small mb-1">{item.label}</span>
            <span className="fw-bold">{item.content}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default InfoComponent;

自定义CSS（CustomComponent.css） #

.col-separator:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background-color: #e0e0e0;
}

.col {
  min-width: 200px;
  padding: 0 1rem;
}

/* 移动端适配：取消分隔线，改为堆叠布局 */
@media (max-width: 767px) {
  .col-separator:not(:last-child)::after {
    display: none;
  }
  .row {
    gap: 1.5rem;
  }
}

五、关键细节说明 #

• row gx-4可替换为自定义--bs-gutter-x变量，灵活调整列间间距
• 分隔线用绝对定位垂直居中，百分比高度适配不同内容长度
• 移动端媒体查询切换为堆叠布局，提升小屏体验
• 所有元素通过align-items-start保持左对齐，文本自动换行不会超出列范围

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