css - 如何在 Bootstrap 4 中均匀分布 Navbar 元素

Question

为网站构建 Bootstrap 导航。

我在想出如何最好地间隔导航栏上的导航链接元素时遇到了一些麻烦(并继续在移动设备上看起来不错)。

我的导航栏代码是:

<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 类。但认为这会给移动 View 带来问题。

此外，如果我最终在导航栏中有第五个元素(从 WordPress Appearnce > Menus 添加)怎么办，我如何让我的代码适应它？

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