React Bootstrap css 导入 bootstrap.min.css 时出现问题答案

【问题标题】：ReactBootstrap css Problems when importing bootstrap.min.cssReact Bootstrap css 导入 bootstrap.min.css 时出现问题
【发布时间】：2018-09-25 18:26:14
【问题描述】：

我正在使用 ReactBootstrap 构建一个 React 网站。我用 ReactBootstrap 和 Footer.js 组件用 MdBootstrap 做了 Navbar 和 Carousel。在我的 Footer.js 上导入 Bootstrap.min.css 后，Carousel.jsx 和 CustomNavbar,jsx 不再是全宽的。

这里是我的Footer.js

这里是screenshot of Navbar and Carousel

这里是screenshot of the Footer

也许我的 Footer.js 上的 bootstrap.min.css 会覆盖 index.html 上的 bootstrap.min.css 引用？我真的不知道有什么解决办法。

有人可以帮帮我吗？

谢谢，

网卡

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

那是因为你使用了一个没有将其设置为流体的容器。

您可以查看引导文档here

您只需要添加一个className 或container-fluid。

来自文档：

容器是 Bootstrap 中最基本的布局元素，是使用我们的默认网格系统时需要。从响应式中选择，固定宽度的容器（意味着它的最大宽度在每个断点）或流体宽度（意味着它一直是 100% 宽）。

将 .container-fluid 用于全宽容器，跨越整个视口的宽度。

【讨论】：

嗨@Matan Bobi，感谢您的回复，我在某些部分添加了className="container-fluid"，但没有更改:(这里是截图：imgur.com/uqKCw18
@Nico90 这是因为className="container-fluid" 仅用于容器元素。对于流体导航栏，您需要在组件上提供fluid=true。你可以在这里查看文档：react-bootstrap.github.io/components/navbar
嗨@Matan Bobi，我得到了一个更好的结果，正如你在这个截图上看到的那样imgur.com/tEZSG99这里是我的导航栏和旋转木马imgur.com/CVCddx3在错误我读到我必须把fluid=true ，我不明白我必须在哪里写它。如果我在行上写流体=真，我也会得到错误。
fluid={true} 应仅设置在导航栏元素上，而不应设置在其所有子元素上。
这里是我的代码imgur.com/ynDPNTJ，但导航栏没有变化。现在我没有错误消息了。