Bootstrap实现14列同行并添加水平滚动条方案求助

核心思路 #

• 给行容器套一层水平滚动容器，让超出部分通过滚动查看
• 强制Bootstrap的行不换行，覆盖默认的自动换行行为
• 保持每列的宽度设定，避免被压缩

修改后的代码 #

HTML部分

<div class="container">
    <!-- 新增滚动容器 -->
    <div class="scroll-container">
        <div class="row nowrap-row">
            <div class="col-xs-2">1</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">3</div>
            <div class="col-xs-2">4</div>
            <div class="col-xs-2">5</div>
            <div class="col-xs-2">6</div>
            <div class="col-xs-2">7</div>
            <div class="col-xs-2">8</div>
            <div class="col-xs-2">9</div>
            <div class="col-xs-2">10</div>
            <div class="col-xs-2">11</div>
            <div class="col-xs-2">12</div>
            <div class="col-xs-2">13</div>
            <div class="col-xs-2">14</div>
        </div>
    </div>
</div>

CSS部分

/* 滚动容器：超出宽度时显示水平滚动条 */
.scroll-container {
    overflow-x: auto;
    padding: 0 15px; /* 可选：避免内容贴容器边缘 */
}

/* 强制行不换行，移除默认负margin避免横向空白 */
.nowrap-row {
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0;
}

/* 确保每列不被压缩，保持设定宽度 */
.nowrap-row .col-xs-2 {
    flex-shrink: 0;
    padding-left: 15px;
    padding-right: 15px;
}

补充说明 #

• 如果你用的是Bootstrap 4/5，把col-xs-2换成col-2即可，逻辑完全一致
• overflow-x: auto会智能判断：内容没超出时隐藏滚动条，超出时自动显示
• flex-shrink: 0是关键，防止列被压缩变形，保证每列宽度统一

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