如何在Bootstrap v4中使<hr/>标签在大屏三列布局时自动转为竖线？

架构老林

2026-8-23

实现响应式分隔线：小屏横线，大屏竖线

针对你使用Bootstrap v4的场景，我们可以通过自定义CSS结合Bootstrap响应式断点来实现需求，具体步骤如下：

1. 调整HTML结构

给原有的<hr>标签添加自定义类responsive-divider，同时给需要竖线的列加上position-relative（用于定位伪元素）：

<div class="row">
    <div class="col-md-4 col-sm-6 p-4">
        <h2>Have a Question?</h2>
    </div>
    <div class="col-md-4 col-sm-6 text-center p-4 position-relative">
        <hr class="responsive-divider"/>
        <h3>FAQs</h3>
        <p>Get more information about ordering, payments and product delivery.</p>
    </div>
    <div class="col-md-4 col-sm-6 text-center p-4 position-relative">
        <hr class="responsive-divider"/>
        <h3 class="mb-4">Call Us</h3>
        <p>Contact our product specialists</p>
    </div>
</div>

2. 编写自定义CSS

利用Bootstrap的md断点（对应屏幕宽度≥768px），控制不同尺寸下的分隔线样式：

/* 小屏设备下，保持<hr>默认横线样式 */
.responsive-divider {
    margin: 1rem 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

/* 大屏设备（≥768px）：隐藏横线，用伪元素生成竖线 */
@media (min-width: 768px) {
    .responsive-divider {
        display: none;
    }
    /* 给第二、第三列添加左侧竖线 */
    .col-md-4.position-relative:not(:first-child)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 1px;
        background-color: rgba(0,0,0,.1);
    }
}