如何在 react-bootstrap 中替换容器 class

Question

我已经安装了 react-bootstrap，并证明我可以使用我主要需要的网格组件。但是为什么找不到 "Container"，我应该如何包装最外层的内容，以便我的页面有边距以及通常由 bootstrap 设置的任何其他内容？

我知道我可以使用常规 CSS，但是 (a) Container 会不会更干净以匹配其中的 bootstrap，以及 (b) 除了旁边还应该有什么边距，包裹所有内部的东西并且仍然可以正常工作？

Answer 1

你可以:

使用包含您正在寻找的 Container comp 的 reactstrap 库
使用 bootstrap container CSS class :

<div className="container"> ... </div>

在这两种情况下，都需要 <link rel="stylesheet" href="path/to/bootstrap/css/lib"> 才能正常工作。

Answer 2

React bootstrap 实际上确实有一个 "container"。它是 Grid 组件。

当您对其应用流体属性时，它会使 'container' 横跨显示器的宽度。然后像往常一样，您将应用来自 react-bootstrap 的 Row 组件（基本上是 <div class="row"></div> 组件），然后在其下方应用 Col 组件也来自 react-bootstrap（基本上是 <div class="col-md-4"></div> 等 html 组件。

如果您不想在网格容器上应用显示器大小的宽度，您可以简单地不包含 fluid 属性并且它会像普通的 div 容器一样工作。

网格遵循与常规相同的 12 列规则 bootstrap

Answer 3

只需使用：

<Grid bsClass="container">
...
</Grid>

除了 react-bootstrap 之外，您还可以通过运行:

在您的项目中包含 Bootstrap CSS

安装bootstrap npm模块
```
npm install --save bootstrap@latest
```
通过
导入CSS
```
import 'bootstrap/dist/css/bootstrap.css';
```
在您应用的根组件中。如果您使用 create-react-app，您可以使用 index.js 文件。

现在您可以像这样在您的项目中使用所有 Bootstrap 类

<div className="container"></div>

或

<Grid className="container"></Grid>

如何在 react-bootstrap 中替换容器 class

How to replace container class in react-bootstrap

reactjs

react-bootstrap