Reactjs 引导导航条坏了

我正在React JS中添加引导Navbar，但由于某些原因，它被破坏了，我在index.html中导入了引导（这里没有React的包装器），我只是尝试提供的示例。没有得到同样的结果

<nav className="navbar navbar-primary Navbarstyle">
   <div class="navbar-header">
     <a class="navbar-brand" href="#">WebSiteName</a>
   </div>
   <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
 </nav>

---

bootstrap中的Navbar是一个

flex-box

我得到了相应的代码片段：

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

---

navbar nav似乎是列或方向，您可以将其覆盖到

行

您的类名中的“

Navbarstyle

”是什么？我们可以看到它的CSS吗？Navbarstyle添加了“这里没有React的包装器”。在这种情况下，您需要在

元素中使用“class”，而不是React的“className”。您是否正在加载其他

.css

文件，这些文件可能会覆盖其中一个行为？

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}