Question

创建导航栏

我已经使用了这个sample demo here我没有使用ul和li标签创建菜单项，因为我想使用字体图标并按btn-group类对它们进行分组。不对导航项使用ul标签的第二个原因是当导航栏处于移动视图状态时，我不希望导航项堆叠而不应该只有一行包含所有这些图标。

我不想更改此导航栏的设计，但我想从文本中移动该部分 - ＆＃34; Log Details＆＃34;以及右边的图标。我尝试过使用pull-right和navbar-right，但它没有帮助。

所以，我的问题是我应该如何将上面的部分浮动到右侧的引导程序导航栏中，这样它就会尊重.container类的正确填充，因为你可以看到导航项的间隙。剩下？下面是我导航栏的html标记：

HTML：

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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>
                <div class="btn-group navbar-left"> <a id="shell_navigation_go_back" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-chevron-left"></span></a>

                    <a id="shell_navigation_go_to_home" href="#/home" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-home"></span>

                        </a>
                </div>
            </div>
            <p id="shell_title_area" class="navbar-text">Title</p>
            <div class="">
                <p id="shell_update_log_area" class="navbar-text">Log Details</p>
                <!-- Collect the nav links, forms, and other content for
                toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <div class="btn-group"> <a id="shell_navigation_display_hub_details" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-align-justify"></span></a>

                        <a id="shell_navigation_refresh_view" href="#/refresh" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-refresh"></span>

                            </a>
                    </div> <a id="shell_navigation_sort_and_filter" href="#/refresh" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-sort"></span></a>

                    <a id="shell_navigation_display_extra_options" href="#/refresh" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-cog"></span>

                        </a>
                </div>
            </div>
        </div>
    </nav>
</div>

Answer 1

这应该可以解决问题：http://www.bootply.com/HccIKNsQwO

只需删除包含“日志详细信息”和导航栏的div，将pull-right课程添加到navbar-collapse（带按钮），navbar-text添加日志详细信息并切换他们在HTML中的地位。

Answer 2

我现在通过更改下面的导航条标记来实现设计，这也可以通过我的问题中的演示链接看到：

HTML：

<nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" 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>
                        <div class="btn-group navbar-left">
                            <a id="shell_navigation_go_back" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-chevron-left"></span></a>
                            <a id="shell_navigation_go_to_home" href="#/home" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-home"></span></a>
                        </div>
                    </div>
                    <p id="shell_title_area" class="navbar-text">Title</p>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <p id="shell_update_log_area" class="navbar-text">Log Details</p>    
                        </li>
                        <li>
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <div class="btn-group">
                                    <a id="shell_navigation_display_hub_details" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-align-justify"></span></a>
                                    <a id="shell_navigation_refresh_view" href="#/refresh" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-refresh"></span></a>
                                </div>
                                <a id="shell_navigation_sort_and_filter" href="#/refresh" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-sort"></span></a>
                                <a id="shell_navigation_display_extra_options" href="#/refresh" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-cog"></span></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

如何将引导程序导航栏中的一个部分浮动到右侧？

2 个答案: