Question

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

<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）将该样式表仅分配给封面组件（已将其分配给整个页面）

OR

2）弄清楚如何以我当前的设置为中心，这非常接近工作了。

Answer 1

如果您使用的是Bootstrap版本4，则可以通过其navbars轻松完成此操作。可以对第一个示例进行编辑，以完成您想要的一项更改。

其页面链接列表的定义类似于def grayConversion(image): grayValue = 0.07 * image[:,:,2] + 0.72 * image[:,:,1] + 0.21 * image[:,:,0] gray_img = grayValue.astype(np.uint8) return gray_img orig = cv2.imread(r'C:\Users\Jackson\Desktop\drum.png', 1) g = grayConversion(orig) cv2.imshow("Original", orig) cv2.imshow("GrayScale", g) cv2.waitKey(0) cv2.destroyAllWindows()，而<ul class="navbar-nav mr-auto">则将内容保持在右侧。使用mr-auto将其更改为<ul class="navbar-nav mx-auto">，这是Bootstrap实用程序类，用于将左右（x轴）边距都设置为auto，从而将列表居中。

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

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

1 个答案: