Question

这是我的第一个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 -->

Answer 1

删除bootstrap-responsive.css。这使响应式功能能够在浏览器调整大小小于979px后将所有DIV的大小调整为100％。

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

如果要保留响应功能，可以使用CSS @media查询来更改导航栏的CSS样式。你将它放在另一个CSS文件（或容器）中并在引导响应后包含它..

@media (max-width: 979px) {

    .navbar { ... }

}

如何限制导航栏固定到容器宽度

1 个答案: