Bootstrap Navbar坏了

Question

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

<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>

CSS

.Navbarstyle{
   width: 100%;
   min-width: 100%;
}

Answer 1

引导程序中的导航栏是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似乎是面向列的，您可以将其覆盖为row。