Bootstrap5+React页面小屏/移动端列无法换行问题求助

问题根源分析 #

你的代码存在几个关键问题导致响应式布局失效：

1. 容器类错误：Bootstrap5没有container-flex这个类，网格系统必须依托container或container-fluid才能生效，用错容器会导致网格规则无法被正确解析。
2. 自定义CSS冲突：你手动编写的[class*="col-"]媒体查询干扰了Bootstrap自带的响应式样式——Bootstrap默认已在小屏幕（<768px）下让.col占满100%宽度，自定义规则可能因优先级问题打乱原有逻辑。
3. 固定宽度限制：.chartBox的width:50vw是固定视窗宽度，小屏幕下会强制列保持半宽，无法自动堆叠。
4. HTML结构不完整：所有容器、行、列标签未闭合，浏览器无法正确识别网格层级。

修复步骤 #

1. 修正容器类

把container-flex替换为Bootstrap官方支持的容器类：

<div class="container-fluid"> <!-- 全屏自适应容器，或用container固定宽度 -->
  <div class="row">
    <!-- 列内容 -->
  </div>
</div>

2. 删除冲突的自定义CSS

删掉这段冗余且冲突的代码：

@media only screen and (max-width: 768px) {
    [class*="col-"] {
        width: 100%;
    }
}

3. 让chartBox自适应宽度

修改.chartBox的CSS，使其在小屏幕下占满容器，大屏幕再恢复半宽：

.chartBox {
    width: 100%;
    height: 525px;
}

/* 大屏幕（≥768px）下设置半宽 */
@media (min-width: 768px) {
    .chartBox {
        width: 50vw;
    }
}

同时把canvas的内联固定宽高改成100%，让它自适应父容器：

<canvas role="img" id="line-chart" style="display: block; box-sizing: border-box; height: 100%; width: 100%;"></canvas>

4. 补全HTML结构

确保所有标签闭合，完整结构示例：

<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/custom.css">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="chartBox" style="position: relative; height: 525px;">
        <canvas role="img" id="line-chart" style="display: block; box-sizing: border-box; height: 100%; width: 100%;"></canvas>
      </div>
    </div>

    <div class="col">
      <div class="card card-body mt-4 mb-4 text-center mx-auto">
        <h2 class="text-center">Add</h2>
        <form>
          <div class="form-group text-center">
            <label for="country">Country</label>
            <select name="country" id="country" class="form-control text-center">
              <option value="">Select the country...</option>
              <option value="India">India</option>
              <option value="United States of America">United States of America</option>
            </select>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

5. 可选：精细化控制断点

如果需要更精准的响应式切换，给列加上断点类，比如col-md，这样在中等屏幕及以上两列平分宽度，小屏幕自动堆叠：

<div class="col-md">...</div>
<div class="col-md">...</div>

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