Boostrap4 navbar с 2 рядами и складным логотипом по центру

Я бы хотел, чтобы 2 строки панели навигации выглядели так

                        CompanyLogo                  link  link  link
-----------------------------------------------------------------------
 link(dropdown)        link       link      link      link      link

логотип компании (по центру), 3 верхние ссылки (по правому краю). верхние 3 ссылки должны свернуться в логотип.

весь 2-й ряд выравниваем по центру и разборно. Вот мой код:

<html>
<div class="header" style="margin-bottom:0">
           <a class="logo" href="#default">CompanyLogo</a>
           <div class="header-right">
           <a href="#countryicon">country</a>
           <a href="#lang">language</a>
           <a href="#signup">
           <img border="0" alt="signup" src="Sign up icon png.png" width="30" 
            height="30">
           </a>
           <a href="#signin">
           <img border="0" alt="signup" src="Sign in icon png.png" width="30" 
             height="30">
           </a>
           </div>
        </div>

        <nav class="nav navbar">
         <ul class="nav justify-content-center">
           <li class="nav-item">
               <a class="nav-link" href="#">Categories</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Home</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Live Auction</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Make Your Wish</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">How it Works</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Purchase Bid Credits</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Contact us</a>
           </li>
          </ul>
        </nav>
        </html>

Я думаю, вы имеете в виду «строки», а не «столбцы». В вашем примере две строки, по 4 и 6 столбцов в каждой.

EmmanuelB 26.10.2018 05:37

Это также может быть полезно: stackoverflow.com/questions/49780918/…

Zim 26.10.2018 13:11
0
2
403
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Примечание: Я не знаю, что вы имеете в виду под «верхними 3 ссылками должны свернуться в логотип», поэтому я просто поместил их вместе с другими элементами навигационной панели на маленькие экраны.

HTML

HTML-код навигационной панели должен быть прямым. Вы можете взглянуть на документацию Bootstrap.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a href="#" class="navbar-brand">
    CompanyLogo
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav upper-controls">
      <li class="nav-item">
        <a class="nav-link" href="#">Country</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Language</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Categories
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Cat 1</a>
          <a class="dropdown-item">Cat 2</a>
          <a class="dropdown-item">Cat 3</a>
          <a class="dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Live Auction</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Make Your Wish</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">How it works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Purchase Bid Credits</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

На маленьких экранах

Опять же, я не знаю, что вы имели в виду, когда 3 ссылки сворачивались в логотип, поэтому я просто поместил их перед другими элементами навигационной панели.

Сложность заключается в том, чтобы разместить логотип по центру. Для этого, помимо настройки justify-content: center; на панели навигации, мне также нужно изменить переключатель кнопок на абсолютное позиционирование, чтобы он не занимал места, чтобы логотип не оставался в центре.

CSS

/* center the logo */
.navbar {
  justify-content: center;
}

/* in order to center the logo */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

Результат

enter image description here

На больших экранах (> 992 пикселей)

Мы можем изменить flex-flow навигационной панели на столбец, чтобы отображались 2 строки. Также мы можем изменить верхние 3 ссылки (я назначил для них пользовательский класс css «upper-controls») на абсолютное позиционирование по той же причине, что и на переключателе кнопок выше.

CSS

/* since it's expanding at lg */
@media(min-width: 992px) {
  /* in order to display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* same logic as the navbar-toggler above */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}

Результат

enter image description here

рабочий пример:https://jsfiddle.net/aq9Laaew/257205/

Другие вопросы по теме