使用 bootstrap 4 作为框架无法使 div 内容正确对齐答案

【问题标题】：can't get div content to align right using bootstrap 4 as framework使用 bootstrap 4 作为框架无法使 div 内容正确对齐
【发布时间】：2018-04-23 09:16:04
【问题描述】：

专家，

我正在尝试升级到 bootstrap 4，但我很难使用 flex 容器。

由于某种原因，我的导航栏菜单链接子菜单和主菜单都没有对齐。但是，当我完全删除子菜单的内容时，主菜单会正确地向右对齐。

我在这里错过了什么？

提前致谢。

https://codepen.io/orthix/pen/ZobjMa

<nav class="header navbar navbar-expand-md navbar-light fixed-top bg-light">
  <div class="container">
    <div class="navbar-brand">
      Logo
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      Menu
    </button>
    <div class="collapse navbar-collapse flex-column align-items-end" id="navbarMenu">
      <div class="row">
        <ul class="col-12 navbar-nav navbar-submenu ml-auto order-last">
          <li class="nav-item">
            <a class="nav-item nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-item nav-link" href="#">Link</a>
          </li>
        </ul>
        <ul class="col-12 navbar-nav ml-auto order-xs-first order-md-last">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-sm btn-outline-secondary" href="#">button 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-sm btn-danger text-white" href="#">button 2</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

您需要使用justify-content-end 实用程序类。

这里是工作代码笔：https://codepen.io/anon/pen/rvOZBK

在此处阅读有关 flexbox 实用程序类的更多信息以证明内容的合理性：https://getbootstrap.com/docs/4.1/utilities/flex/#justify-content

【讨论】：