如何用Flex相对调整元素大小？解决步进器宽屏布局问题

用Bootstrap的row和col组件实现了步进器，小屏显示正常（已隐藏步骤文本），但存在两个问题：

1. 在lg、xl等宽屏设备上，步骤间间距过大，步进器占满容器宽度，希望通过媒体断点将其宽度设为60%或80%，让步骤更紧凑。
2. 步骤3和4之间的线条存在断裂问题。

请问改用Flex能否解决问题？若可以该如何实现？或者有其他替代方案？

原实现代码 #

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">

<div class="card cw-480">
    <div class="card-body">
        <div class="align-text-center">
            <div class="row justify-content-center">
                <div class="col text-center">
                    <div id="step-1" class="circle">
                        <div class="line"></div>
                    </div>
                    <p>Step 1</p>
                </div>
                <div class="col text-center">
                    <div id="step-2" class="circle">
                        <div class="line"></div>
                    </div>
                    <p>Step 2</p>
                </div>
                <div class="col text-center">
                    <div id="step-3" class="circle">
                        <div class="line"></div>
                    </div>
                    <p>Step 3</p>
                </div>
                <div class="col text-center">
                    <div id="step-4" class="circle">
                        <div class="line"></div>
                    </div>
                    <p>Longlonglongstep 4</p>
                </div>
                <div class="col text-center">
                    <div id="step-5" class="circle">
                        <div class="line"></div>
                    </div>
                    <p>Step 5</p>
                </div>
                <div class="col text-center">
                    <div id="step-6" class="circle">
                        <div class="line"></div>
                    </div>
                    <p>Step 6</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS #

.row.justify-content-center div:last-child > div > div {
    display: none;
}

.line {
    width: 100%;
    height: 9px;
    margin-left: 16px;
    border-bottom: 2px solid lightgrey;
    position: absolute;
    display: block;
    pointer-events: none;
    cursor: default;
}

.circle {
    height: 16px;
    width: 16px;
    background-color: lightgrey;
    border-radius: 50%;
    display: inline-block;
}

用Flex布局完全可以解决你的两个问题——宽屏间距过大和线条断裂，而且实现起来更灵活可控。以下是具体实现方式，同时也提供基于原有Bootstrap布局的修改方案。

一、Flex布局实现方案 #

1. 重构HTML结构 #

把原有的row/col结构替换为自定义的Flex容器和项，将线条作为独立元素，避免依赖定位导致的布局混乱：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">

<div class="card">
    <div class="card-body">
        <div class="stepper-container">
            <div class="stepper-item">
                <div class="circle" id="step-1"></div>
                <p>Step 1</p>
            </div>
            <div class="stepper-line"></div>
            <div class="stepper-item">
                <div class="circle" id="step-2"></div>
                <p>Step 2</p>
            </div>
            <div class="stepper-line"></div>
            <div class="stepper-item">
                <div class="circle" id="step-3"></div>
                <p>Step 3</p>
            </div>
            <div class="stepper-line"></div>
            <div class="stepper-item">
                <div class="circle" id="step-4"></div>
                <p>Longlonglongstep 4</p>
            </div>
            <div class="stepper-line"></div>
            <div class="stepper-item">
                <div class="circle" id="step-5"></div>
                <p>Step 5</p>
            </div>
            <div class="stepper-line"></div>
            <div class="stepper-item">
                <div class="circle" id="step-6"></div>
                <p>Step 6</p>
            </div>
        </div>
    </div>
</div>

2. 编写Flex样式 #

通过媒体断点控制宽屏容器宽度，用Flex布局保证步骤和线条均匀分布：

/* 基础Flex步进器布局 */
.stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

.stepper-line {
    flex: 1;
    height: 2px;
    background-color: lightgrey;
    margin: 0 8px;
}

.circle {
    height: 16px;
    width: 16px;
    background-color: lightgrey;
    border-radius: 50%;
    display: inline-block;
}

/* 宽屏断点调整宽度，让步骤更紧凑 */
@media (min-width: 992px) { /* Bootstrap lg断点 */
    .stepper-container {
        width: 80%; /* 可按需改为60%或其他值 */
    }
}

/* 小屏隐藏步骤文本 */
@media (max-width: 991px) {
    .stepper-item p {
        display: none;
    }
}

方案优势 #

• 彻底解决线条断裂：线条作为独立Flex项，自动填充步骤间剩余空间，不受文本长度影响。
• 精准控制宽屏布局：通过媒体断点直接限制容器宽度，避免步骤过度分散。
• 响应式表现自然：小屏自动隐藏文本，布局保持紧凑。

二、基于原有Bootstrap布局的修改方案 #

如果不想完全重构，也可以在原有row/col基础上修改，解决两个问题：

1. 修复宽屏间距过大 #

给外层容器添加媒体断点样式，限制宽屏时的宽度：

@media (min-width: 992px) {
    .align-text-center {
        width: 80%;
        margin: 0 auto;
    }
}

2. 修复线条断裂 #

原线条断裂是因为步骤4的长文本撑大了col宽度，导致线条定位失效。调整col的弹性属性并修改线条定位：

.row.justify-content-center .col {
    flex: 1;
    min-width: 0; /* 强制长文本换行，避免破坏布局 */
}

.line {
    position: relative; /* 改为相对定位，避免脱离文档流 */
    width: calc(100% - 16px); /* 减去圆圈宽度，避免溢出 */
    margin-left: 8px;
    top: -8px; /* 调整位置对齐圆圈 */
}

方案说明 #

• flex:1保证所有col宽度一致，min-width:0强制长文本换行，避免撑大容器。
• 线条改为相对定位，结合calc()计算宽度，确保线条不会断裂或溢出。

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