Многорядная навигационная панель с BS4

Question

Я пытаюсь получить следующий макет с помощью bootstrap 4 navbar:

---

- Бренд --------------- ------------ Торговая марка партнера -

- Товар1 - Товар2 - Товар3 ------------------- -Logout -

У меня две проблемы:

1. Все отображается на одной строке с классом "row"
2. Пробела нет , удалите с помощью mr-auto в списке элементов слева

У меня есть этот код:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <div class="row">
        <div class="navbar-brand flex-column">
            <a href="/">
                <span class="my-logo"></span> <span class="nav-name">Brand name</span>
                <small class="nav-strap">Catchy strapline</small>
            </a>

            <a href="http://partner.com/" class="partner">Partner Name</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
      </div>
      <div class="row">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                logged in as blah
            </form>
        </div>
      </div>
    </div>
</nav>

У меня есть опыт работы в основном с BS3, и я не могу понять, почему это не так. не работает.

Answer 1

**Use following code snippet:**

<nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container flex-column border">
                  <div class="row w-100">
                    <div class="navbar-brand justify-content-between d-flex w-100 m-0">
                        <a href="/">
                            <span class="my-logo"></span> <span class="nav-name">Brand name</span>
                            <small class="nav-strap">Catchy strapline</small>
                        </a>

                        <a href="http://partner.com/" class="partner">Partner Name</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    </div>
                  </div>
                  <div class="row w-100">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            logged in as blah
                        </form>
                    </div>
                  </div>
                </div>
            </nav>