引导右对齐[重复]

很好的一天,

我有个问题。 我正在一个网站上工作,我希望菜单排列正确。

理论上应该是:

    <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>

然而,这并不是正确的。 所以我做错了什么。

我错过了我的错误。 我希望有人能指责我。 因为我错过了。现在已经玩弄了几个小时了,我快疯了。

我的代码是:

                    <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>

我把源代码放到了网上,因为我的责任可能在我的CSS代码中:

• 编辑:

通过: 曼尼

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

到

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

毫升汽车 是解决办法!

自动页边距

当您混合使用flex对齐时,flexbox可以做一些非常棒的事情。 带自动页边距。以下是控制flex的三个示例 通过自动页边距的项目:默认(无自动页边距),将两个项目推送到 右边(.mr auto),左推两项(.ml auto)。