React中使用Bootstrap类遇阻：如何基于root div实现col-6栅格？

嘿，我之前也踩过这个坑！核心问题其实是两点：一是Bootstrap的栅格系统依赖严格的层级结构，二是默认情况下#root容器并没有撑满整个浏览器视口，导致样式只能在它的有限范围内生效。下面是一步步的解决方案，咱们分文件来调整：

1. 先调整index.html，打好样式基础 #

首先要确保Bootstrap CSS正确引入，同时让html、body和#root完全占满视口，去掉默认的边距：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 引入Bootstrap官方CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      /* 让整个页面的根元素都撑满视口，去掉默认留白 */
      html, body, #root {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <title>React Bootstrap Grid Demo</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2. 在App.js中严格遵循Bootstrap栅格层级 #

Bootstrap栅格必须按照「容器 → 行 → 列」的顺序嵌套，不能直接在#root下写.col-*类，否则宽度计算会失效：

import React from 'react';

function App() {
  return (
    {/* 使用container-fluid让栅格占满整个视口宽度，用container则是固定宽度 */}
    <div className="container-fluid h-100">
      {/* 行：用于包裹列，自动处理列之间的间距 */}
      <div className="row h-100">
        {/* 占6份宽度的列（总共12份） */}
        <div className="col-6 bg-primary text-white p-4">
          左侧区域（占页面一半宽度）
        </div>
        {/* 另一个占6份宽度的列 */}
        <div className="col-6 bg-secondary text-white p-4">
          右侧区域（占页面一半宽度）
        </div>
      </div>
    </div>
  );
}

export default App;

3. index.js保持基础渲染即可 #

这部分一般不需要改动，只要确保把App正确挂载到#root里就行：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

关键细节说明 #

• 为什么要设置html/body/#root的样式？：默认情况下body有8px的margin，#root的高度也不会自动继承视口高度，这会导致你的栅格容器被局限在一小块区域里，样式自然不会铺满整个页面。
• 栅格层级不能乱：.col-*必须放在.row里面，.row必须放在.container或.container-fluid里面，这是Bootstrap栅格计算宽度和间距的基础。
• h-100类的作用：这是Bootstrap的高度工具类，让容器和行撑满父元素的高度，如果你不需要全屏高度，可以去掉这个类。

这样调整后，你的Bootstrap栅格就会相对于整个body视口生效，而不是仅仅局限在#root容器里啦！

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