如何在Bootstrap 4中均匀间隔Navbar元素

问题描述

为网站构建引导导航.

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

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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！