在 React 中使用 Bootstrap Row 嵌套多个组件

本文旨在解决在 React 项目中使用 react-bootstrap 组件时，多个组件无法正确在 Row 中并排显示的问题。通过检查 bootstrap 和 react-bootstrap 的安装情况，并确保引入 Bootstrap 的 CSS 文件，可以有效解决组件垂直排列的问题，从而实现预期的栅格布局效果。

在使用 react-bootstrap 构建 React 应用时，经常会遇到需要在同一 Row 组件中放置多个自定义组件的情况。如果这些组件未能正确并排显示，而是垂直排列，通常是由于以下两个原因造成的：

1. 缺少必要的依赖包:

确保你的项目中已经安装了 bootstrap 和 react-bootstrap 这两个 NPM 包。可以使用以下命令进行安装：

npm install bootstrap react-bootstrap

bootstrap 提供了底层的 CSS 样式，而 react-bootstrap 则提供了 React 组件形式的封装。

2. 缺少 Bootstrap CSS 样式:

react-bootstrap 组件依赖于 Bootstrap 的 CSS 样式才能正确显示栅格布局。需要在你的应用入口文件（例如 index.js 或 App.js）中引入 Bootstrap 的 CSS 文件。

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

示例代码：

以下是一个完整的示例，展示了如何在 Row 组件中正确地并排显示两个自定义组件。

import React from "react";
import { Container, Col, Row } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<Container>
<Row>
<Comp1 />
<Comp2 />
</Row>
</Container>
);
}
const Comp1 = () => {
return <Col md={1}>Hello world</Col>;
};
const Comp2 = () => {
return <Col md={11}>Foobar</Col>;
};
export default App;

在这个例子中，App 组件包含一个 Container 组件，其中包含一个 Row 组件。Row 组件包含两个自定义组件 Comp1 和 Comp2。Comp1 和 Comp2 分别使用 Col 组件来定义它们在 Row 中的宽度。md={1} 表示在 medium 屏幕尺寸下，Comp1 占据 1 个栅格单元，而 md={11} 表示 Comp2 占据 11 个栅格单元。

注意事项：

• 确保 bootstrap 和 react-bootstrap 的版本兼容。可以参考 react-bootstrap 的官方文档，查看推荐的 bootstrap 版本。
• 如果使用了自定义的 CSS 样式，需要确保这些样式不会覆盖 Bootstrap 的样式，导致栅格布局失效。
• 使用 Container 组件可以提供一个响应式的容器，确保内容在不同屏幕尺寸下都能正确显示。

总结：

在 React 项目中使用 react-bootstrap 时，确保安装了 bootstrap 和 react-bootstrap，并且引入了 Bootstrap 的 CSS 文件。通过正确使用 Row 和 Col 组件，可以轻松地实现栅格布局，从而构建出美观且响应式的用户界面。如果仍然遇到问题，请检查控制台是否有任何错误信息，并仔细检查 CSS 样式是否冲突。