html - 在 bootstrap 3 导航菜单中更改布局间距

Question

我的 bootstrap3 container div(最大宽度为 1170)正上方有一个全 Angular 导航菜单。

<div class="navbar navbar-default">
    <!-- menu -->
</div>

<div class='container'>
    <!-- content -->
</div>

您可以在此处查看示例:http://jsfiddle.net/xrXt2/show/ .一切都在按预期进行。但是，我想更改导航菜单的布局，但我不知道该怎么做。我仍然希望导航菜单在整个宽度上拉伸(stretch)，但它里面的文本应该被移动(一旦它缩小到菜单的单个图标按钮，它看起来很好并且可以保持原样)。理想情况下，当菜单选项仍然展开时，我想更改两件事:

(1) "sitename"的左边缘应该与container 的左边缘对齐。

(2) “帮助”的右边缘应该与容器的右边缘对齐。

我猜想，对于那些知道自己在修改 bootstrap 的 css 方面所做的事情的人来说，这是一项相对容易的任务。不幸的是，我真的不知道从哪里开始。

总而言之，现在是这样的:

这是我希望的样子:

如前所述，这是宽度缩小到 container 大小时的默认布局，我没有兴趣更改此行为:

Answer 1

将导航栏包裹在 .container div 中并将 .nav-right 添加到 .nav

已更新以反射(reflect)指定不在导航栏上使用 .pull-* 的文档。

这是一个更新的例子。 http://jsfiddle.net/xrXt2/2/show/

<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navigate" href="#">sitename</a>
    </div>

        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">action</a></li>
                <li><a href="#">sync</a></li>
                <li><a href="#">help</a></li>
        </ul>

        </div><!--/nav-collapse -->
    </div>
</div> <!-- /static navbar -->