引导程序 4 |将 <ul> 对齐到右侧 [重复]

Posted 2023-03-06

【中文标题】引导程序 4 |将 <ul> 对齐到右侧 [重复]

【英文标题】：Bootstrap 4 | Align <ul> to right [duplicate]

【发布时间】：2018-04-21 21:56:20

【问题描述】：

我想在标题上将列表右对齐，这是代码

<div class="collapse navbar-collapse" id="app-header-nav">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#solution">Solution
        <span class="sr-only">(current)</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#company">Company</a>
    </li>
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#openings">Openings</a>
    </li>
    <li style="display:none" id="getStartedHeader" class="nav-item">
        <a class="nav-link navbarMenuItem getStartedButtonHeader" data-toggle="modal" data-target="#getStartedModal">Get Started</a>
    </li>
    <li class="nav-item">
      <a class="app-login nav-link" href="undefined">Login</a>
    </li>
  </ul>
</div>

我尝试使用 float、ml-auto 和 justify-content-end，但没有，有一种新方法可以像 bootstrap 4 上的 text-right 一样将 div 上的所有内容对齐？

这是我需要的。

【参考方案1】：

现在 BS 4 有了 flexbox，对齐就容易多了。以下是left, right and center in the Bootstrap 4 Navbar. 的示例

此答案复制自：Bootstrap NavBar with left, center or right aligned items

【讨论】：

老兄，你才是真正的 MVP :D