Bootstrap 4.1 Vertical Navs, как сделать значок mr-auto / ml-auto

Question

Is navs not 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 гибким контейнером, чтобы можно было использовать 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>