Bootstrap 4 flexbox error

Question

, я пытаюсь использовать опции flexbox в последней версии bootstrap 4 ... и я хочу установить некоторые пробелы в своих навигационных элементах ... это, используя классы flexbox, созданные bootstrap ... вот пример демонстрации на навигационной панели в документации по загрузке. Я просто добавил классы, которые мне нужны, до конца элемента nav, но ничего не происходит ... элемент бренда и список вообще не перемещаются ... ПОМОЩЬ PLS!

https://v4-alpha.getbootstrap.com/utilities/flexbox/

<nav class="navbar navbar-toggleable-md navbar-light d-flex justify-content-end flex-row "> 
        <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 align-self-start" href="#">Navbar</a> 
        <div class="collapse navbar-collapse" id="navbarNav"> 
          <ul class="navbar-nav"> 
           <li class="nav-item dropdown active"> 
             <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
             Portada 
             </a> 
             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
              <a class="dropdown-item" href="#">Nosotros</a> 
              <a class="dropdown-item" href="#">Another action</a> 
              <a class="dropdown-item" href="#">Something else here</a> 
             </div> 
           </li> 
           <li class="nav-item"> 
             <a class="nav-link" href="#">Nosotros</a> 
           </li> 
           <li class="nav-item dropdown"> 
             <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
             Soluciones 
             </a> 
             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
              <a class="dropdown-item" href="#">Nosotros</a> 
              <a class="dropdown-item" href="#">Another action</a> 
              <a class="dropdown-item" href="#">Something else here</a> 
             </div> 
           </li> 
           <li class="nav-item"> 
             <a class="nav-link" href="#">Clientes</a> 
           </li> 
          </ul> 
        </div> 
       </nav> 

Answer 1

Причина justify-content: flex-end; не работает в настоящее время, потому что #navbarNav является width: 100%;, что означает, что оно принимает на все доступное пространство в nav.navbar, не оставляя места для сдвига детей от nav.navbar к flex-start или flex-end. Один из способов, которым вы можете получить nav.navbar, чтобы выровнять его гибкие элементы до flex-end, назначает width: auto; на #navbarNav, что освободит место для смещения детей nav.navbar на гибкий или гибкий конец.

#navbarNav { 
 
    width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-toggleable-md navbar-light d-flex justify-content-end flex-row "> 
 
    <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 align-self-start" href="#">Navbar</a> 
 
    <div class="collapse navbar-collapse" id="navbarNav"> 
 
    <ul class="navbar-nav"> 
 
     <li class="nav-item dropdown active"> 
 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
             Portada 
 
             </a> 
 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
      <a class="dropdown-item" href="#">Nosotros</a> 
 
      <a class="dropdown-item" href="#">Another action</a> 
 
      <a class="dropdown-item" href="#">Something else here</a> 
 
     </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Nosotros</a> 
 
     </li> 
 
     <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
             Soluciones 
 
             </a> 
 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
      <a class="dropdown-item" href="#">Nosotros</a> 
 
      <a class="dropdown-item" href="#">Another action</a> 
 
      <a class="dropdown-item" href="#">Something else here</a> 
 
     </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Clientes</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>