如何更改导航栏/容器宽度？ Bootstrap 3

我的导航栏的默认宽度太宽1170px。我想把它降低到940px - 但我想保持响应。如何更改导航栏/容器宽度？ Bootstrap 3

我试图在CSS中更改容器宽度，并且它对于大型浏览器来说看起来不错，但在查看移动尺寸时页面的其余部分会分崩离析。

这是正确的属性还是有其他的东西？

@media (min-width: 1200px) { 
    .container { 
    max-width: 1170px; 
}

这里是我的导航栏的代码

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <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" href="#">Site Name</a> 
     </div> 

     <div class="collapse navbar-collapse"> 

      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#shop">Shop</a></li> 
      <li><a href="#showcase">Showcase</a></li> 
      <li><a href="#help">Help</a></li> 
      <li><a href="#my account">My Account</a></li> 
      <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div>

来源

2013-08-31 Mark

集装箱宽度会少下降到940个像素视口超过992个像素。如果确实是不希望容器大于940像素宽，则转至Bootstrap customize页，并将@container-lg-desktop设置为@container-desktop或硬编码940px。

来源

2013-08-31 13:06:44

我不不明白。我进入了自定义页面，将“@ container-lg-desktop”更改为940，下载了zip，用新的引导CSS替换了我的bootstrap.css，我的页面仍然显示更大的宽度。 – Mark

我想这就是构建脚本的一个错误，正如帮助文本所述：“为不同的屏幕尺寸定义'.container'的最大宽度。” –

我必须做些事情。许多在bootstrap网站展示的网站的宽度为940px，因为这是大多数设计师的目标。所以它一定是可能的。 – Mark

我刚刚自己解决了这个问题。你在正确的轨道上。

@media (min-width: 1200px) { 
    .container{ 
     max-width: 970px; 
    } 
}

这里我们说：在视口1200px或更大 - 将容器最大宽度设置为970px。这将覆盖当前将该范围的最大宽度设置为1170px的标准类。

注意：确保你在bootstrap.css中包含了这个东西（以前每个人都犯了这个小错误）。

希望这会有所帮助..祝你好运！

来源

2013-09-04 08:23:59

还值得一提的是，如果您只想在导航栏上执行此操作，您可以将上面的代码段嵌套在'.navbar'中。 –

也别忘了'.container-fluid' –

如果我不想让所有的容器遵守这个规则，我会怎么做？我应该给它一个id，然后在我的CSS文件中定位它？我敢肯定这会起作用，但我很好奇，如果这是做到这一点的“正确方法”。 – ohhh

正确的方式做到这一点是改变这里的在线定制宽度：

http://getbootstrap.com/customize/

下载编译源，覆盖现有的引导DIST目录，并重新加载（介意浏览器缓存！！）

所有更改都将被保留以.json配置文件中

再次应用所有的变化只是上传的JSON文件，你准备好去

来源

2016-02-25 15:49:18

您使用的.navbar-static-top强制您的navbar变为全角。删除该课程，您将获得可调整大小的navbar。然后，您可以将其包装在您想要的尺寸的span#中。

<div class="container"> 
<div class="row"> 
    <div class="span6 offset3"> 
     <div class="navbar"> 
      ... 
     </div> 
    </div> 
</div>

来源

2016-03-20 15:59:48

navbar-fixed-bottom是否也强制它？ –

如果你正在处理更加动态的屏幕分辨率/尺寸，而不是在像素硬编码的大小可以将宽度改为介质宽度的百分比，这样

@media (min-width: 1200px) { 
    .container{ 
     max-width: 70%; 
    } 
}

来源

2016-06-08 15:05:51 Akshar

你好这个工作你试试吧！在你的情况是。导航栏固定顶{}

.navbar-fixed-bottom{ 
    width:1200px; 
    left:20%; 
}

来源

2016-07-29 19:42:06 Laed

只是简单：

.navbar{ 
    width:65% !important; 
    margin:0px auto; 
    left:0; 
    right:0; 
    padding:0; 
}

，或者

.navbar.navbar-fixed-top{ 
    width:65% !important; 
    margin:0px auto; 
    left:0; 
    right:0; 
    padding:0; 
}

希望工程（至少，对于未来搜索）

来源

2017-07-25 00:17:40

如何更改导航栏/容器宽度？ Bootstrap 3

回答

相关问题