css - Bootstrap 4.1 垂直导航如何使用 mr-auto/ml-auto 徽章

Question

是navs不是navbar

https://getbootstrap.com/docs/4.1/components/navs/#vertical

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link A
            <span class="badge badge-warning badge-pill">140</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link B
            <span class="badge badge-warning badge-pill">300</span>
        </a>
    </li>
</ul>

累的改变

<span class="badge badge-warning badge-pill">

到

<span class="badge badge-warning badge-pill ml-auto">

但没有成功

已编辑:请参阅下面的 @Temani Afif 答案

如果与d-flex仅

与d-flex align-items-center问题解决了

Answer 1

您需要将 a 元素设为 Flex 容器才能使用 ml-auto/mr-auto。只需将 d-flex 添加到 a 即可:

我还添加了 align-items-center 到中心，但这不是强制性的:

.nav {
 background:pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link d-flex align-items-center" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link A
            <span class="badge badge-warning badge-pill ml-auto">140</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-flex align-items-center" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link B
            <span class="badge badge-warning badge-pill ml-auto">300</span>
        </a>
    </li>
</ul>