Question

我的bootstrap3 container div上方有一个全宽导航菜单（最大值为1170）。

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

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

您可以在此处查看示例：http://jsfiddle.net/xrXt2/show/。一切都按照预期的方式运作。但是，我想更改导航菜单的布局，我不知道如何去做。我仍然希望导航菜单在整个宽度上伸展，但是应该移动它内部的文本（一旦它缩小到菜单的单个图标按钮，它看起来很好，它可以保持原样）。理想情况下，当菜单选项仍然扩展时，我想改变两件事：

（1）“sitename”的左边缘应与container的左边缘对齐。

（2）“帮助”的右边缘应与container的右边缘对齐。

我猜测，对于那些知道他们在修改bootstrap的css方面正在做什么的人来说，这是一个相对容易的任务。不幸的是，我真的迷失了从哪里开始。

总之，以下是它现在的样子：

original

以下是我希望它的样子：

desired

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

shrunk

Answer 1

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

更新以反映指明不在导航栏上使用.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 -->

Answer 2

Morgan ARR Allen已经回答，但应使用navbar-right类来将菜单的一部分对齐，此类用于example provided by bootstrap itself。此外，引导文档显示a warning about using .pull-right：

不在导航栏中使用

要将导航栏中的组件与实用程序类对齐，请使用.navbar-left   或.navbar-right代替。有关详细信息，请参阅导航栏文档。

所以代码是：

<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 class="container">
</div> <!-- /static navbar -->

jsfiddle

更新：如上所示，源代码pull-right和navbar-right使用不同的规则。

Update2：从bootstrap文档中添加引用。

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

2 个答案:

不在导航栏中使用