Bootstrap 4.3移动端布局失效：col-6未优先生效求助

核心问题分析 #

你的布局未按预期工作的主要原因有两个：

1. 按钮所在行的 justify-content-space-between 是无效类名，正确的 Bootstrap 4 类应为 justify-content-between，拼写错误破坏了 Flexbox 布局对齐逻辑，导致列无法正常换行。
2. 自定义输入框的列未明确指定移动端宽度，虽默认会占满一行，但显式声明可避免潜在布局冲突。

修复后的关键代码片段 #

修改按钮所在行和输入框列的类名：

<div class="row selectors justify-content-between" id="rc-button-bar">
  <div class="col-6 col-md mb-2">
    <button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
  </div>
  <div class="col-6 col-md mb-2">
    <button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
  </div>
  <div class="col-6 col-md mb-2">
    <button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
  </div>
  <div class="col-6 col-md mb-2">
    <button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
  </div>
  <div class="col-12 col-sm mb-2 d-flex align-items-center">
    <input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input>&nbsp;<span class="boldtxt">%</span>
  </div>
</div>

修复说明 #

• 修正 justify-content-between 类名后，Flexbox 容器会正确在列间分配空间，同时保留 Bootstrap 行默认的 flex-wrap: wrap 特性，让移动端的 .col-6 类生效（每行显示两个按钮）。
• 为输入框列添加 col-12，明确其在移动端占满整行，避免挤压按钮列布局。
• 你使用的 .col-md（不带数字）是 Bootstrap 4 中实现中等屏幕及以上等宽列的正确写法，符合需求。

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