css - 如何获得 bootstrap v4alpha6 导航列表以证明正确？

Question

很明显，bootstrap 4 的 alpha 6 版本已经完全变通了，这破坏了我在 alpha 5 中使用的一些东西。根据 this fiddle ，我正在尝试让 flex 对齐类将导航栏内容放在右侧，如下所示:

<ul class="navbar-nav justify-content-end">

检查元素显示它上面有 justify-content: flex-end !important;，所以我希望它能工作。为什么不呢？

Answer 1

要在桌面设备上右对齐 .navbar-nav，您需要将 .justify-content-end 类放在其父级上:

• 将 .justify-content-end 类添加到 #navbarSupportedContent。

---

如果要右对齐移动端菜单:

• .text-right(而不是 .justify-content-end)在你的 .navbar-nav 和
• .justify-content-end 在你的 .form-inline 上。

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#replaceThisWithYourOwnId" aria-controls="replaceThisWithYourOwnId" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">BrandName</a>

  <div class="collapse navbar-collapse justify-content-end" id="replaceThisWithYourOwnId">
    <ul class="navbar-nav text-right">
      <li class="nav-item active">
        <a class="nav-link ">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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0 justify-content-end">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>