Bootstrap导航栏,右侧和左侧菜单图标旁边的元素

时间:2016-05-09 07:50:53

标签: html css twitter-bootstrap

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

  1. 栏左侧的关闭图标
  2. 条形图右侧的标签元素,但应将其放在菜单图标左侧(显示在小型设备上)。如果没有菜单图标,则标签元素应该位于栏的右侧
  3. 这是我到目前为止所尝试的:

    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] |
    

2 个答案:

答案 0 :(得分:0)

这样的东西?

  <nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top"><i class="fa fa-power-off"></i></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                                <a href="/link">
                                            <span class="label"><i class="fa fa-commenting"></i> 10</span>
                                        </a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

答案 1 :(得分:0)

更新了小提琴。嗯,sry因为我从span中删除了“label”类,但它没有显示“fa”图标。所以,仅用于测试。而且,切换菜单还有一个标签。我想这就是你想要的,我是对的吗?

http://jsfiddle.net/kqemk0zk/

","