부트스트랩4에서 Navbar 요소를 균등하게 띄우는 방법

부트스트랩4에서 Navbar 요소를 균등하게 띄우는 방법

웹 사이트의 부트스트랩 네비게이션 구축.

네비게이션 바의 네비게이션 링크 요소를 띄우는 최적의 방법을 찾는 데 어려움을 겪고 있습니다(모바일에도 계속 적합합니다).

내 내비게이션 코드:

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

현재 네 개의 네비게이션 요소가 있습니다.처음에 nav-link 클래스에 width=25%를 추가할까 생각했습니다.하지만 모바일 뷰에 문제가 생길 수 있습니다.

또한 네비게이션 바에 다섯 번째 아이템이 있는 경우(WordPress Affectnce > Menus에서 추가) 어떻게 하면 코드를 거기에 맞출 수 있을까요?

를 사용합니다..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/

언급URL : https://stackoverflow.com/questions/49094948/how-to-evenly-space-navbar-elements-in-bootstrap-4