Как равномерно распределить элементы Navbar в Bootstrap 4

Создание начальной загрузки для веб-сайта.

У меня возникли проблемы с определением того, как лучше всего разместить элементы навигационной ссылки на моей панели навигации (и по-прежнему хорошо выглядеть для мобильных устройств).

Мой код навигации:

<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. Но подумайте, что это создаст проблему для мобильного просмотра.

Кроме того, что, если в моей панели навигации появится пятый элемент (добавленный из «Внешний вид WordPress»> «Меню»), как я могу адаптировать свой код к этому?


wordpress css twitter-bootstrap bootstrap-4
person TimothyAURA    schedule 04.03.2018    source источник

Ответы (1)


arrow_upward
38
arrow_downward

Используйте класс .nav-fill для одинакового размещения элементов и класс w-100 (ширина: 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/

person Zim    schedule 04.03.2018
comment
Круто, а что делает w-100? - person TimothyAURA; 04.03.2018
comment
Возникли проблемы с добавлением этих двух классов, см. здесь: stackoverflow.com/questions/49208421/ - person TimothyAURA; 10.03.2018
comment
Спасибо. Что делает пункт меню-963, пункт меню-42? Они случайны? - person Ryan Dhungel; 04.09.2019