Навигация по двум строкам, выравнивание по ширине во второй строке - PullRequest
Новая
       14

Навигация по двум строкам, выравнивание по ширине во второй строке

1 голос
/ 19 июня 2019

Таким образом, мы стремимся добиться гибкой складной навигации с двумя рядами, где первая включает в себя логотип и выбор языка, а основные ссылки второй строки: 

|                                                             |
|                             LOGO          lang              |
|        link1        link2         link3        link4        |

jsfiddle фрагмент прогресса на данный момент

Не могу получить равную ширину для основных ссылок, чтобы они равномерно распределялись по горизонтали в окне просмотра lg и выше. Со структурой и классами я использую ссылки сложены очень плотно.

Навигация по второму ряду: 

<ul class="navbar-nav nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>    
  <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="#">Live Auction</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact us</a>
  </li>
</ul>

Есть идеи, как переопределить классы или другое решение? Спасибо!

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Вы можете сделать это, добавив width:100% к .navbar-collapse, .nav-pills.Ниже приведен фрагмент для того же 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .navbar-collapse,
    .nav-pills {
      width: 100% !important
    }
    
    header {
      width: 100%;
      background: #282828;
      background-position-x: 0%;
      background-position-y: 0%;
      background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
      background-size: cover;
      background-position: center;
    }
    /* center the logo */
    
    .navbar {
      justify-content: center;
    }
    /* in order to center the logo */
    
    .navbar .navbar-toggler {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
    }
    /* center all navbar items */
    
    .navbar-nav {
      align-items: center;
    }
    /* 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: 0.5rem;
        font-size: 85%;
      }
    }
  </style>
</head>

<body>

  <header>
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg navbar-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="#">Language</a>
                </li>
              </ul>
              <ul class="navbar-nav nav nav-pills nav-justified">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <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="#">Live Auction</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>


</body>

</html>
1 голос
/ 19 июня 2019

Укажите начальный размер ваших элементов flex (li) для соответствия содержимому, изменив значение flex-basis с 0 на auto - вы можете включить его в Bootstrap 4 с помощью flex-fill класс. Добавьте его в свой HTML: 

<li class="nav-item flex-fill">
    <a class="nav-link" href="#">Live Auction</a>
</li>

Или добавьте свойство в свой CSS: 

.nav-justified li.nav-item {
    /* ... */
    flex-basis: auto;
}

Пример скрипки: https://jsfiddle.net/wcj1gzr5/1/

Чтобы распределить флекс-элементы с таким эффектом, как justify-content: space-between, ширина div и ul, содержащих флекс-элементы, должна увеличить их ширину (предоставляя доступное пространство для распределения флекс-элементов). Для этого установите min-width: 100%; на обоих элементах, чтобы они заполнили содержащий их элемент, а затем используйте justify-content на ul для управления расстоянием и позиционированием.

Пример скрипки: https://jsfiddle.net/wcj1gzr5/2/

...