1

这是我的第一个 Twitter Bootstrap 项目。

使用 Twitter Bootstrap，如果我在顶部使用容器流体或仅容器作为我的固定导航栏，这似乎并不重要。一旦超过大约 980 像素，就会突然射出浏览器的全宽。我在 Firefox 和 IE 上都观察到了它。

有任何想法吗？

我的代码如下：

在头部：

<link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">

在体内：

<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#"><i class="icon-home icon-white"></i></a>
<a class="brand" href="#">Time Machine: Lawrence, Kansas</a>
<ul class="nav pull-right">
<li class="divider-vertical"></li>  
<div class="btn-group pull-right">
  <a class="btn btn-inverse" href="#"><i class="icon-search icon-white"></i> Buildings</a>
  <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-search"></i> Blocks</a></li>
    <li class="active"><a href="#"><i class="icon-search"></i> Buildings test out long string</a></li>
    <li><a href="#"><i class="icon-search"></i> Businesses</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Contact Us</a></li>
  </ul>
  <a class="btn btn-inverse" href="#"><i class="icon-repeat icon-white"></i></a>
</div>
<li class="divider-vertical"></li>  
</ul> <!-- nav class -->

</div> <!-- navbar-inner -->
</div> <!-- navbar navbar-fixed-top -->

4

1 回答 1

0

删除bootstrap-responsive.css. 这启用了响应功能，一旦浏览器调整为小于 979 像素，所有 DIV 的大小将调整为 100%。

<link href="assets/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">

如果您想保留响应式功能，您可以使用 CSS @media 查询来更改仅导航栏的 CSS 样式。你可以把它放在另一个 CSS 文件（或容器）中，并在 bootstrap-responsive 之后包含它。

@media (max-width: 979px) {

    .navbar { ... }

}
于 2013-06-07T20:06:27.030 回答