Question

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

我知道我可以使用常规的CSS，但是（a）不要容器更清洁以匹配内部的引导程序，并且（b）除了边距之外还应该有什么来包装所有内部的东西和仍然有效吗？

Answer 1

你可以：

使用包含此正在查找的Container补丁的reactstrap库
使用bootstrap container CSS类：

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

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

Answer 2

React bootstrap确实有一个“容器”。它是 Grid 组件。

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

如果您不想将宽度应用于网格容器的大小，那么您只需将 fluid 属性包含在其中它就可以像普通的div容器一样工作。

网格遵循与常规引导程序相同的12列规则

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中替换容器类

3 个答案: