如何在Bootstrap 4中均匀间隔Navbar元素 [英] How to evenly space Navbar elements in Bootstrap 4

问题描述

为网站构建引导导航.

我在确定如何最好地分隔导航栏上的导航链接元素(并继续在移动设备上看起来不错)方面遇到了麻烦.

I'm having some trouble working out how best to space out the nav link elements on my navbar (and continue to look good for mobile).

我的导航栏代码是:

<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类.但是认为那样会给移动视图带来问题.

I currently have four nav elements. I first thought about adding width=25% to the nav-link class. But think that will then creat a problem for the mobile view.

如果我最终在导航栏中添加了第五项(从WordPress外观>菜单添加)，该怎么办呢?

Also what if I end up having a fifth item in my nav bar (added from WordPress Appearnce > Menus) how could I make my code adapt to that?

推荐答案

使用.nav-fill等距分隔项目，并使用w-100(width:100％)类使其全角...

Use the .nav-fill to equally space the items, and w-100 (width:100%) class to make it full width...

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/

这篇关于如何在Bootstrap 4中均匀间隔Navbar元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！