如何更换react-bootstrap中的容器类

我安装了react-bootstrap，并且已经证明我可以使用网格组件，这是我的主要需求。但是为什么没有找到“容器”，我应该如何包装我的最外层内容，以便我的页面具有页边空白以及其他任何通常由引导程序设置的内容？如何更换react-bootstrap中的容器类

我知道我可以使用普通的CSS，但（a）容器不会比较干净，无法匹配内部的引导程序，（b）除了边距外，还有什么应该包含所有内部的东西以及仍然有它的工作好？

来源

2017-07-02 user1272965

看一看到[reactstrap（HTTPS：//reactstrap.github .io/components/layout /）lib，他们有你正在寻找的这个'Container'组件。否则就使用'container' CSS类 – soywod

@soywod，谢谢你的建议。我会看看reactstrap，但是你能解释更多关于CSS容器类吗？它在哪里定义，以及如何将它应用于JSX？ – user1272965

'react-bootstrap'和'reactstrap'都需要导入引导库（CSS的一个，例如[this cdn]（https://www.bootstrapcdn.com/））。然后，您只需添加[官方文档]（http://getbootstrap.com/css/#overview-container）中所述的“容器”类。例如：'

...

' – soywod

您可以：

使用reactstrap LIB包含此Container补偿你正在寻找
使用引导container CSS类：

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

在这两种情况下，，<link rel="stylesheet" href="path/to/bootstrap/css/lib">将需要得到这个工作。

来源

2017-07-02 16:56:49 soywod

React bootstrap实际上有一个“容器”。它的网格组件。

当您将液体属性应用于它时，它会使“容器”跨越显示器的宽度。然后像往常一样，您将应用行组件从反应bootstrap（这基本上是<div class="row"></div>组件），然后您将然后应用组件组件也反应bootstrap（这基本上是<div class="col-md-4"></div> etc html组件。

如果你不想宽度应用到网格容器显示器的大小，你可以只是简单地不包括流体属性，它和它的工作就像一个正常的div容器。

电网遵循像常规引导一样的12列规则

来源

2017-07-02 17:04:58 Chris

只需使用：

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

除了react-bootstrap你也可以在项目中包含的Bootstrap CSS运行：

安装引导NPM模块
```
npm install --save [email protected] 
```
导入CSS由
```
import 'bootstrap/dist/css/bootstrap.css'; 
```
在您的应用的根组件中。如果您使用create-react-app，则可以使用index.js文件。

现在你可以使用所有的自举类在你的项目中，像这样

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

或

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

来源

2018-01-20 23:16:51 slashburn

如何更换react-bootstrap中的容器类

回答

相关问题