如何在 Bootstrap 4 中均匀分布导航栏元素

Posted 2023-03-06

【中文标题】如何在 Bootstrap 4 中均匀分布导航栏元素

【英文标题】：How to evenly space Navbar elements in Bootstrap 4

【发布时间】：2018-08-12 04:37:23

【问题描述】：

为网站构建引导导航。

我在确定如何最好地在我的导航栏上隔开导航链接元素时遇到了一些麻烦（并且继续在移动设备上看起来不错）。

我的导航栏代码是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul id="menu-main-nav" class="navbar-nav">
        <li id="menu-item-42" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-42"><a href="XXX" class="nav-link">HOME</a></li>
        <li id="menu-item-963" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-963"><a href="XXX" class="nav-link">SERVICES</a></li>
        <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">ABOUT US</a></li>
        <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

我目前有四个导航元素。我首先考虑将 width=25% 添加到 nav-link 类。但认为这会给移动视图带来问题。

另外，如果我最终在导航栏中有第五个项目（从 WordPress 外观 > 菜单添加），我怎样才能让我的代码适应它？

【参考方案1】：

使用.nav-fill 等间距项目，并使用w-100 (width:100%) 类使其全宽...

https://www.codeply.com/go/djlHAC3uux

<ul id="menu-main-nav" class="navbar-nav nav-fill w-100">
     <li id="menu-item-42" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-42"><a href="XXX" class="nav-link">HOME</a></li>
     <li id="menu-item-963" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-963"><a href="XXX" class="nav-link">SERVICES</a></li>
     <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">ABOUT US</a></li>
     <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">CONTACT</a></li>
</ul>

http://getbootstrap.com/docs/4.0/utilities/sizing/

【讨论】：

酷，w-100 有什么作用？

添加这两个类时遇到问题，请参见此处：***.com/questions/49208421/…

谢谢。 menu-item-963, menu-item-42 有什么作用？它们是随机的吗？

太有帮助了！就我而言，它一开始不起作用。我有一个自定义的两行导航菜单，我需要在带有navbar-collapse 的div 和带有navbar-nav 的ul 上使用它们。顺便说一句，在 Bootstrap 5 中仍然有效，以防有人想知道。