Как сделать несколько дочерних элементов шириной 50% и расположить их рядом в контейнере с изогнутым направлением?

Question

Я использую начальную загрузку 4 .navbar-nav.

Вот полная демонстрация в реальном времени на codeply https://www.codeply.com/go/Zib61kYY2M

Когда .navbar-nav переходит в мобильный свернутый режим с установленной точкой останова.

Эти стили, указанные ниже, применяются и создают красивый список кнопок навигации.

display: flex;
flex-direction: column;

Но мне нужно контролировать ширину двух последних дочерних элементов .nav-item.И мне нужно, чтобы элементы отображались рядом.

Возможно ли это с помощью flex?

В настоящее время так выглядит навигация ...

Вот так я хочу, чтобы последние два элемента выглядели ...

Я добавил 2 классапоследние 2 элемента называются .nav-account, поэтому мне просто нужно установить несколько CSS-кодов следующим образом ...

.nav-account {
   width: 50%;
   ...
}

Поэтому оставьте последние 2 элемента шириной 50% и рядом друг с другом.

Полный код ниже и здесь https://www.codeply.com/go/Zib61kYY2M

<ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
    <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">FAQ's</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item nav-account ml-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
    </li>

    <li class="nav-item nav-account">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
    </li>
</ul>

Answer 1

Одним из решений может быть обертывание последних двух <li> элементов внутри следующего элемента:

<div class="ml-lg-auto d-inline-flex">
  ...
</div>

, а затем добавить классы w-50 к ним обоим.

Пример:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Flex direction</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
      <li class="nav-item active border">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Contact</a>
      </li>

      <div class="ml-lg-auto d-inline-flex">
        <li class="nav-item nav-account w-50 border">
          <a class="nav-link" href="#">Log in</a>
        </li>
        <li class="nav-item nav-account w-50 border">
          <a class="nav-link" href="/register">
            <i class="fas fa-fw fa-user-plus color-sweets"></i>
            Register
          </a>
        </li>
      </div>
    </ul>

  </div>
</nav>

Вот еще одна версия, в которой используются вложенные элементы <li> и <ul>, чтобы не допускать использования недопустимой разметки, как указано в комментариях:

Альтернативная версия:

.custom-ul {
    list-style:none;
    padding: 0px;
    margin: 0px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Flex direction</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
      <li class="nav-item active border">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Contact</a>
      </li>

      <li class="ml-lg-auto">
        <ul class="custom-ul d-flex">
          <li class="nav-item nav-account w-50 border">
            <a class="nav-link" href="#">Log in</a>
          </li>
          <li class="nav-item nav-account w-50 border">
            <a class="nav-link" href="/register">
              <i class="fas fa-fw fa-user-plus color-sweets"></i>
              Register
            </a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</nav>

Answer 2

Вы можете попробовать следующее:

1. Добавить flex-wrap flex-row классы к вашему ul (это устанавливает flex-direction всегда как row и устанавливает flex-wrap )
2. Добавьте col-12 col-lg-auto к вашему nav-items ожидайте двух последних (устанавливает 100% flex-basis в мобильном представлении)
3. Добавьте col-6 col-lg-auto кпоследние два nav-items (устанавливает 50% flex-basis для двух последних элементов в мобильном представлении)

См. демонстрацию ниже:

.navbar {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.navbar-hide {
  pointer-events: none;
  opacity: 0;
}
.nav-item {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Flex direction</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right flex-wrap flex-row">
      <li class="nav-item col-12 col-lg-auto active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item nav-account ml-lg-auto col-6 col-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
      </li>
      <li class="nav-item nav-account col-6 col-lg-auto">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
      </li>
    </ul>
  </div>
</nav>
<main role="main" class="container">
  <div class="jumbotron">
    <h1>Flex direction</h1>
    <p class="lead">My question, in mobile mode, is it possible to make the the <strong>register</strong> and <strong>login</strong> buttons 50% wide and side by side using flex?</p>
    <a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.3/utilities/flex/" role="button">View flex docs »</a>
  </div>
</main>