如何将引导导航栏中的部分向右浮动？

Question

我正在尝试使用bootstrap 3 创建导航栏

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

我不想更改此导航栏的设计，但我想将该部分从文本“日志详细信息”和右侧的图标移到右侧。我试过使用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>