CSS 如何更改导航栏/容器宽度？引导程序 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18548453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change navbar/container width? Bootstrap 3
提问by Mark
The default width for my navbar is too wide 1170px. I would like to reduce it down to 940px- but I want to keep the responsiveness.
我的导航栏的默认宽度太宽了1170px。我想将其减少到940px- 但我想保持响应能力。
I tried to change the container width in CSS and it looks ok with a large browser, but the rest of the page falls apart when viewing for mobile sizes.
我尝试在 CSS 中更改容器宽度，它在大型浏览器中看起来没问题，但是在查看移动尺寸时页面的其余部分会崩溃。
Is this the correct property or is there something else?
这是正确的财产还是还有别的什么？
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
Here is my navbar code
这是我的导航栏代码
<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>
回答by Jose Browne
I just solved this issue myself. You were on the right track.
我自己刚刚解决了这个问题。你走在正确的轨道上。
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
Here we say: On viewports 1200px or larger - set container max-width to 970px. This will overwrite the standard class that currently sets max-width to 1170px for that range.
我们在这里说：在 1200 像素或更大的视口上 - 将容器最大宽度设置为 970 像素。这将覆盖当前将该范围的 max-width 设置为 1170px 的标准类。
NOTE: Make sure you include this AFTER the bootstrap.css stuff (everyone has made this little mistake in the past).
注意：确保在 bootstrap.css 内容之后包含它（过去每个人都犯过这个小错误）。
Hope this helps.. good luck!
希望这有帮助，祝你好运！
回答by Martin Bean
Container widths will drop down to 940 pixels for viewports less than 992 pixels. If you reallydon't want containers larger than 940 pixels wide, then go to the Bootstrap customizepage, and set @container-lg-desktopto either @container-desktopor hard-coded 940px.
对于小于 992 像素的视口，容器宽度将下降到 940 像素。如果您真的不想要大于 940 像素宽的容器，请转到Bootstrap 自定义页面，并将其设置@container-lg-desktop为@container-desktopor 或 hard-coded 940px。
回答by Martin Bean
The .navbar-static-topyou are using forces your navbarto become full-width. Remove that class and you will get a resizable navbar. Then, you can wrap it in a span#of the size you want.
在.navbar-static-top您使用您的力量navbar，成为全宽。删除该类，您将获得一个可调整大小的navbar. 然后，您可以将其包裹在span#您想要的大小中。
<div class="container">
<div class="row">
<div class="span6 offset3">
<div class="navbar">
...
</div>
</div>
</div>
回答by Laed
Hello this working you try! in your case is .navbar-fixed-top{}
你好这个工作你试试！在你的情况下是 .navbar-fixed-top{}
.navbar-fixed-bottom{
width:1200px;
left:20%;
}
回答by Herman Nz
just simple:
很简单：
.navbar{
width:65% !important;
margin:0px auto;
left:0;
right:0;
padding:0;
}
or,
或者，
.navbar.navbar-fixed-top{
width:65% !important;
margin:0px auto;
left:0;
right:0;
padding:0;
}
Hope it works (at least, for future searchers)
希望它有效（至少，对于未来的搜索者）
回答by Akshar
If you are dealing with more dynamic screen resolution/sizes, instead of hardcoding the size in pixels you can change the width to a percentage of the media width as such
如果您正在处理更动态的屏幕分辨率/大小，而不是硬编码以像素为单位的大小，您可以将宽度更改为媒体宽度的百分比
@media (min-width: 1200px) {
.container{
max-width: 70%;
}
}
回答by Gianluca Ghettini
Proper way to do it is to change the width on the online customizer here:
正确的做法是在此处更改在线定制器上的宽度：
http://getbootstrap.com/customize/
http://getbootstrap.com/customize/
download the recompiled source, overwrite the existing bootstrap dist dir, and reload (mind the browser cache!!!)
下载重新编译的源代码，覆盖现有的 bootstrap dist 目录，然后重新加载（注意浏览器缓存！！！）
All your changes will be retained in the .json configuration file
您的所有更改都将保留在 .json 配置文件中
To apply again the all the changes just upload the json file and you are ready to go
要再次应用所有更改，只需上传 json 文件即可
