html - Bootstrap 导航栏，在菜单图标旁边的右侧和左侧带有元素

Question

我正在尝试使用 Bootstrap 构建导航栏。我的导航栏应该有两个元素:

1. 栏左侧的关闭图标
2. Label 元素在栏的右侧，但它应该放在菜单图标(在小型设备上显示)的左侧。如果没有菜单图标，则标签元素应位于栏的右侧

这是我到目前为止尝试过的:

JSFiddle:http://jsfiddle.net/0jejx693/1/

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <ul class="nav navbar-nav nav-pills navbar-right">
                <li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li>
                <li>
                <a href="/link">
                    <span class="label"><i class="fa fa-commenting"></i> 10</span>
                </a>
            </li>
            </ul>
        </div>

    </div>
</nav>

所以结果应该是这样的:

小

| [icon]                                    [lable] [menu] |

大

| [icon]                                           [lable] |

Answer 1

更新 fiddle 。嗯，对不起，因为我从 span 中删除了“label”类，但它没有显示“fa”图标。所以，只是为了测试。而且，还有一个标签留给切换菜单。我想这就是您想要的，对吗？

http://jsfiddle.net/kqemk0zk/

.label-cont{
  position: absolute!important; /*Important used only to example. Could be overrated with hierarchy*/
  right: 60px;
}