React中如何实现ToggleButtonGroup垂直排列？设置orientation属性无效怎么办

• 首先检查react-bootstrap依赖版本：orientation="vertical"属性仅支持v2.5.0及以上版本的react-bootstrap，低版本引入该属性不会生效。
  执行以下命令可查看当前安装的版本：

  npm list react-bootstrap
  # yarn用户执行
  yarn list react-bootstrap
  

  若版本低于v2.5.0，执行升级命令即可：

  npm install react-bootstrap@latest bootstrap@latest
  # yarn用户执行
  yarn add react-bootstrap@latest bootstrap@latest
  

• 确认项目入口已引入bootstrap全局样式，缺失样式会导致布局属性不生效：
  在你的index.js（或main.jsx/tsx等入口文件）顶部添加如下代码：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

• 低版本兼容方案：如果受项目限制无法升级依赖，可通过自定义CSS实现垂直布局：
  给ToggleButtonGroup添加自定义类名：

  <ToggleButtonGroup className="vertical-tbg" type="checkbox">
    {/* 内部按钮逻辑保持不变 */}
  </ToggleButtonGroup>
  

  新增对应的CSS样式：

  .vertical-tbg {
    display: flex;
    flex-direction: column;
  }
  .vertical-tbg .btn {
    border-radius: 0;
  }
  .vertical-tbg .btn:first-of-type {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
  }
  .vertical-tbg .btn:last-of-type {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
  }
  

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