css - 如何将 Bootstrap 导航栏中的部分 float 到右侧？

Question

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

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

我不想更改此导航栏的设计，但我想将文本部分 - “日志详细信息”和右侧的图标移到右侧。我试过使用 pull-right 和 navbar-right 但它没有帮助。

所以，我的问题是我应该如何将 Bootstrap 导航栏中的上述部分 float 到右侧，以便它尊重 .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 中切换它们的位置。