如何让Bootstrap的col-3元素保持单行可滚动，不换行？

要让col-3元素保持单行并显示横向滚动条、不自动换行，可按以下方式修改布局：

核心实现思路 #

给包含col-3的父容器添加禁止换行和横向滚动的样式，调整Bootstrap默认的flex布局行为。

具体代码修改 #

1. 给父容器（通常是row）添加自定义类（比如scrollable-row），并添加对应CSS：

.scrollable-row {
    display: flex;
    flex-wrap: nowrap; /* 强制不换行 */
    overflow-x: auto; /* 触发横向滚动条 */
    padding-bottom: 10px; /* 给滚动条预留空间，避免遮挡内容 */
}

2. 保留col-3类不变，若需要固定宽度的col-3，可额外设置固定占比：

<div class="row scrollable-row">
    <div class="col-3">内容1</div>
    <div class="col-3">内容2</div>
    <div class="col-3">内容3</div>
    <div class="col-3">内容4</div>
    <div class="col-3">内容5</div>
    <!-- 可继续添加更多col-3元素 -->
</div>

可选优化 #

如果想要隐藏滚动条但保留滚动功能，可添加浏览器兼容样式：

.scrollable-row::-webkit-scrollbar {
    display: none; /* 适配Chrome、Safari、Edge */
}
.scrollable-row {
    -ms-overflow-style: none; /* 适配IE和Edge */
    scrollbar-width: none; /* 适配Firefox */
}

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