Bootstrap 4 flexbox 错误

Question

，我正在尝试使用最新版本 bootstrap 4 中的 flexbox 选项...我想在我的导航元素上设置一些空格...这个，使用 flexbox 类由 bootstrap 制作...这是 bootstrap 文档中显示的导航栏示例我刚刚添加了类我需要到导航元素的末尾但没有任何反应...品牌元素和列表根本没有移动...求助！

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 中所有可用的 space ], 没有空间将 nav.navbar 的 children 移动到 flex-start 或 flex-end。使 nav.navbar 将其 flex-items 对齐到 flex-end 的一种方法是将 width: auto; 分配给 #navbarNav，这将释放 space 以移动children 的 nav.navbar 到 flex-start 或 flex-end。

#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>

Bootstrap 4 flexbox 错误

Bootstrap 4 flexbox error

css

frameworks

alignment

navbar

flexbox