How to arrange a Bootstrap 4 menu with too many elements

Question

I'm trying to understand how to arrange a Bootstrap 4 menu when I have a lot of menu's links.

At the moment, when I put too many links, the navbar doesn't care about the contenitor and extends his width behind the contenitor.

Here an image to explain better:

I would like to arrange the menu to keep the menu's voices inside the grey contenitor even if I have too many voices.

For example, how can I do if I want to go in the line below in case of too many voices?

here my code:

<header>
  <div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="160px"></a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item text-center active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

Answer 1

You can use flex-column to create two rows in a bootstrap 4 alpha menu.

<header>
    <div class="container">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="160px"></a>
          <div class="collapse navbar-collapse flex-column" id="navbarNav">
            <ul class="navbar-nav mx-auto">
              <li class="nav-item text-center active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
            </ul>
           <ul class="navbar-nav mx-auto">
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
    </div>
</header>

The flex-column class stacks the two ul tags vertically. Hope this is what you're looking for.