带有左、居中和右元素的引导导航栏？

Question

我想在我的网站上有一个导航栏，中间有三个选项，左上角是公司名称，右上角是一个展开的下拉菜单。然而，在花了几个小时试图从互联网上实现不同的之后，它们都不适合我。格式总是超级关闭。虽然，我找到了一个一切正常的地方，除了中间三个元素的列表显示它们是堆叠的而不是水平的。我可以保证，我已经查看了所有其他关于 slack 的类似问题，但没有一个问题能够解决我的问题。这是我的代码：

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li>
        <a href="#">Left</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
      <li>
        <a href="#">Explore</a>
      </li>
      <li>
        <a href="#">Engage</a>
      </li>
      <li>
        <a href="#">Experience</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="#">Right</a>
      </li>
    </ul>
  </div>
</nav>

这是添加此组件后的屏幕截图。 screenshot

非常有趣的是，我必须在封面页组件的顶部导入，这样我的幻灯片才能正常工作。如果我取出幻灯片，它会正确设置导航栏。

所以我要么需要：

1) 将该样式表仅分配给封面组件（它一直将其分配给整个页面）

或

2) 弄清楚如何使我当前的设置居中，这非常接近工作。

Answer 1

如果您使用的是 Bootstrap 版本 4，您可以使用他们的 navbars 轻松完成此操作。可以对第一个示例进行编辑，只需一次更改即可完成您想要的操作。

他们的页面链接列表定义为<ul class="navbar-nav mr-auto">，mr-auto 将内容保持在右侧。将其更改为 <ul class="navbar-nav mx-auto">，使用 mx-auto，这是 Bootstrap 实用程序类，用于将左右（x 轴）边距设置为自动，这将使列表居中。

有关工作示例，请参阅此 fiddle。