css - Bootstrap 4：在导航栏中右对齐菜单？

Question

我正在使用 Bootstrap 4 默认导航栏，我只想添加一个折叠菜单，该菜单在未折叠时位于右侧，而不是左侧。

我尝试添加text-rightand float-right，但实际上都没有将菜单向右移动。

这是一个显示该问题的引导程序。

这也是一个片段，因为 StackOverflow 希望我使用一个，但我认为它的宽度不足以显示未折叠的菜单：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        <div class="collapse navbar-collapse float-right">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

标签： cssbootstrap-4

Answer 1

将ml-auto类添加到ul包含菜单的标签

<ul class="nav navbar-nav ml-auto">
   <li class="active nav-item">
      <a href="#" class="nav-link">Homes</a>
   </li>
   <li class="nav-item">
      <a href="#about" class="nav-link">About</a>
   </li>
   <li class="nav-item">
      <a href="#contact" class="nav-link">Contact</a>
   </li>
</ul>