React中使用Bootstrap实现Div组件并排显示的问题

问题根源 #

你没用到原生Bootstrap的核心栅格布局，直接平级放置两个组件，自然会垂直堆叠。

解决步骤 #

1. 给最外层容器加container或container-fluid类（前者固定宽度，后者撑满屏幕）
2. 在里面套一个row容器，Bootstrap的row会自动管理列的排列和间距
3. 把地址表单和ListGroup分别放在两个col-*类的容器里，比如col-md-8和col-md-4（md代表平板及以上屏幕生效，数字总和不超过12，可根据需求调整）

示例代码 #

import React from 'react';

const AddressListComponent = () => {
  return (
    <div className="container mt-4">
      <div className="row">
        {/* 地址表单占8列 */}
        <div className="col-md-8">
          <form>
            <div className="mb-3">
              <label className="form-label">收件人</label>
              <input type="text" className="form-control" placeholder="输入收件人姓名" />
            </div>
            <div className="mb-3">
              <label className="form-label">详细地址</label>
              <textarea className="form-control" rows="3"></textarea>
            </div>
            {/* 其他表单元素 */}
            <button type="submit" className="btn btn-primary">保存地址</button>
          </form>
        </div>
        {/* 右侧ListGroup占4列 */}
        <div className="col-md-4">
          <div className="list-group">
            <h5 className="mb-3">常用地址</h5>
            <a href="#" className="list-group-item list-group-item-action">公司地址</a>
            <a href="#" className="list-group-item list-group-item-action">家庭地址</a>
            <a href="#" className="list-group-item list-group-item-action">临时地址</a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddressListComponent;

关键提醒 #

• 确认已经在项目里正确引入Bootstrap CSS（比如在public/index.html里加CDN链接）
• 小屏幕下两个组件会自动垂直堆叠，这是Bootstrap的响应式特性，如需强制小屏幕也并排，可改用col-*类（比如col-8和col-4）
• 别自己写自定义CSS来设置浮动或行内块，容易和Bootstrap的布局规则冲突，优先用官方栅格系统

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