代码之家 › 专栏 › 技术社区 › kenken9999

引导程序4.1垂直导航如何使用mr auto/ml auto徽章

bootstrap-4 css

1

kenken9999 · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

1

2

Temani Afif 6 年前

你需要做出决定 a 能够使用的弹性容器的元素 ml-auto / mr-auto . 只需添加 d-flex 一

我还补充道 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>