如何基于容器/组件宽度而非视口实现Bootstrap列响应式布局？

方案1：React监听组件尺寸 + 动态类切换 #

直接通过React监听组件的实时宽度，根据阈值切换列的布局类，完美适配拖拽调整场景：

import { useState, useRef, useEffect } from 'react';

const ResizableList = () => {
  const listRef = useRef(null);
  const [shouldFullWidth, setShouldFullWidth] = useState(false);
  const THRESHOLD_Z = 600; // 自定义阈值宽度

  const checkContainerWidth = () => {
    if (!listRef.current) return;
    const currentWidth = listRef.current.offsetWidth;
    setShouldFullWidth(currentWidth <= THRESHOLD_Z);
  };

  useEffect(() => {
    checkContainerWidth();
    // 监听窗口缩放
    window.addEventListener('resize', checkContainerWidth);
    // 如果用了拖拽组件（比如react-resizable），在这里添加拖拽结束的回调触发检查
    return () => window.removeEventListener('resize', checkContainerWidth);
  }, []);

  return (
    <div ref={listRef} className="row">
      <div className={`${shouldFullWidth ? 'col-12' : 'col-8'}`}>
        自适应列内容
      </div>
      <div className="col-4">
        固定宽度列内容
      </div>
    </div>
  );
};

export default ResizableList;

如果需要多阈值，用SCSS写个混合宏快速生成响应类：

// 定义组件专属断点
$component-breaks: (
  z: 600px,
  m: 800px,
);

@mixin component-media($break) {
  @media (max-width: map-get($component-breaks, $break)) {
    @content;
  }
}

// 生成自定义响应类
.col-component-z-12 {
  @include component-media(z) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

之后在React里可以结合状态切换这些自定义类，灵活度拉满。

方案2：纯Flexbox自适应（无需JS） #

利用Flexbox的换行特性和最小宽度，让列在容器达到阈值时自动占满整行：

<div class="row flex-wrap">
  <div class="col-8 flex-auto-custom">
    自适应列内容
  </div>
  <div class="col-4">
    固定列内容
  </div>
</div>

.flex-auto-custom {
  // 当容器宽度小于阈值Z时，强制占满整行
  @media (max-width: 600px) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

这个方案适合不需要拖拽实时响应的场景，纯CSS解决，简单直接。

方案3：Bootstrap容器查询降级方案 #

如果想尝试容器查询（@container）但要兼容旧浏览器，可以用JS监听作为兜底：

// 定义容器断点
$container-breaks: (z: 600px);

@each $break, $size in $container-breaks {
  .component-container-#{$break} {
    @container (max-width: $size) {
      .col-container-#{$break}-12 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  }
}

然后在React组件中，给容器加component-container-z类，列加col-8 col-container-z-12，同时保留方案1的JS监听逻辑，在不支持容器查询的浏览器里自动切换类，实现全兼容。

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