css - 徽章 Bootstrap : Align on the left in navbar

Question

Bootstrap 3.3.5 和我的 Badge Css 有一个小问题:

我的 Html 代码:

<div class="collapse navbar-collapse navbar-vertical-principal" id="nav-index">
<div class="nav-group">
    <ul class="nav navbar-nav" id="nav-index">
        <li>
            <a href="/app_dev.php/utilisateur/cabinet/2/copropriete/14/remise-cheque">
            Remises de chèques
            <span class="badge pull-right  badge-blue ">0</span>
            <span class="badge pull-right  badge-green "><i class="fa fa-check"></i> </span>
            </a>
        </li>
        <li>
            <a href="/app_dev.php/utilisateur/cabinet/2/copropriete/14/remise-prelevement">
            Remises de prélèvements SEPA
            <span class="badge pull-right  badge-blue ">0</span>
            <span class="badge pull-right  badge-green "><i class="fa fa-check"></i> </span>
            </a>
        </li>
        <li>
            <a href="/app_dev.php/utilisateur/cabinet/2/copropriete/14/remise-virement">
            Remises de virements SEPA
            <span class="badge pull-right  badge-blue ">0</span>
            <span class="badge pull-right  badge-green "><i class="fa fa-check"></i> </span>
            </a>
        </li>
    </ul>
</div>

我的自定义 Css:

.navbar-vertical-principal .nav-group {
    padding: 5px
}
.navbar-vertical-principal .navbar-nav {
    float: none;
    margin: 0
}
.navbar-vertical-principal .navbar-nav > li {
    float: none;
    margin: 0 -5px
}
.navbar-vertical-principal ul li a {
    padding: 7.5px;
    display: block
}
.navbar-vertical-principal ul li a span.badge {
    margin-left: 5px;
}

你能帮帮我吗？我只想在左侧对齐我的徽章(并且响应)。谢谢:)

Answer 1

在 anchor 之前移动并移除向右拉

    <li>
        <a href="/app_dev.php/utilisateur/cabinet/2/copropriete/14/remise-cheque">
        <span class="badge   badge-blue ">0</span>
        <span class="badge   badge-green ">
        Remises de chèques
        <i class="fa fa-check"></i> </span>
        </a>
    </li>