Bootstrap右对齐

Question

美好的一天，

我有一个问题。 我在一个网站上希望菜单正确对齐。

理论上应该是：

moment.js

但是对齐不正确。 所以我做错了。

我错过了我的错误。 我希望有人能指责我。 因为我想念它。到目前为止，摆弄它已经几个小时了，这真让我发疯。

我的代码是：

    <ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 disabled" href="#">Disabled</a>
  </li>
</ul>

我把源代码放在了网上，因为我的责任可能在我的CSS代码中：

• 编辑：

由： Manny

                    <ul class="nav justify-content-end" id="vpMenu">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Explore <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="index.html">Home</a>
                                <a class="dropdown-item" href="explore.html">Explore</a>
                                <a class="dropdown-item" href="listing.html">Listing</a>
                                <a class="dropdown-item" href="single-listing.html">Single Listing</a>
                                <a class="dropdown-item" href="contact.html">Contact</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Listings <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                                <a class="dropdown-item" href="index.html">Home</a>
                                <a class="dropdown-item" href="explore.html">Explore</a>
                                <a class="dropdown-item" href="listing.html">Listing</a>
                                <a class="dropdown-item" href="single-listing.html">Single Listing</a>
                                <a class="dropdown-item" href="contact.html">Contact</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>
                    </ul>

到

<ul class="nav justify-content-end" id="vpMenu">

.ml-auto 是解决方案！

  

自动边距

     

当您混合Flex对齐方式时，Flexbox可以做一些很棒的事情   自动保证金。下面显示了控制flex的三个示例   通过自动页边距设置项目：默认（无自动页边距），将两个项目推送到   向右（.mr-auto），然后向左推两个项目（.ml-auto）。

Answer 1

尝试一下，更改<ul class="nav justify-content-end" id="vpMenu"> 到<ul class="nav ml-auto justify-content-end" id="vpMenu">

stackblitz