12

我有一个使用 twitter bootstrap 的以下导航栏代码

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

并且输出是 使用原始引导程序 当我从 bootstap.css 中的“.navbar .container{width:auto}”中删除“width：auto”时，输出变为 破解后 并且是我期望的输出。

https://github.com/twitter/bootstrap/issues/2093将“宽度：自动”显示为预期功能。我在这里做错了什么？

4

4 回答 4

14 
<div class="navbar navbar-static-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

这应该这样做

于 2013-04-10T21:57:19.847 回答
2

我找到了上述问题的另一种解决方案。

将navbar-fixed-top类添加到主navbardiv。

并添加

.navbar-fixed-top{
position: relative;
}

到你的 CSS 规则。

这限制了菜单向左拉，并且在我为 wordpress 开发主题时工作正常。

于 2013-06-10T11:47:23.923 回答
0

如果您查看Bootstrap 基本导航栏示例，您将看到导航栏两侧都有边距。这是因为对于非流体容器，您的页面将占据固定宽度，而导航栏使用该宽度。

如果您希望导航栏扩展到整个页面，则需要使用 aclass="container-fluid"但在流畅的布局中，菜单项（默认情况下）将从页面的左侧流动。

在您的代码中，您同时使用了两者container，container-fluid哪个不正确，并且根据 Bootstrap 文档，您需要将导航放置在容器中 - 而不是在导航标签中嵌入容器。

于 2012-12-10T10:34:37.300 回答
0

我通过从in 中删除width: auto定义解决了这个问题。.navbar .containerbootstrap.css

不是一个理想的解决方案（bootstrap.css一般编辑），但它比将所有响应宽度应用于选择器要简单得多。

于 2013-04-05T09:06:59.487 回答