Bootstrap 4.1 Vertical Navs如何进行MR-AUTO / ML-AUTO徽章

时间：2018-09-17 23:59:10

标签： css bootstrap-4

navs不是navbar

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

enter image description here 

<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

enter image description here

使用d-flex align-items-center解决了问题

enter image description here

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题