twitter-bootstrap 如何在 Bootstrap 4 中均匀分布 Navbar 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49094948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to evenly space Navbar elements in Bootstrap 4
提问by TimothyAURA
Building a bootstrap naviation for website.
为网站构建引导导航。
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).
我在确定如何最好地将导航栏上的导航链接元素隔开时遇到了一些麻烦（并继续在移动设备上看起来不错）。
My navbar code is:
我的导航栏代码是：
<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>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.
我目前有四个导航元素。我首先想到将 width=25% 添加到导航链接类。但认为这会给移动视图带来问题。
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?
另外，如果我的导航栏中有第五个项目（从 WordPress Appearnce > Menus 添加），我该如何让我的代码适应它？
回答by Zim
Use the .nav-fillto equally space the items, and w-100(width:100%) class to make it full width...
使用.nav-fill等w-100间距项目，和(width:100%) 类使其全宽...
https://www.codeply.com/go/djlHAC3uux
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>
