twitter-bootstrap Bootstrap：如何将容器的宽度更改为 1400 像素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39867619/
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
Bootstrap: How can i change the width of container to 1400px?
提问by Lui
i need to use custom container in Bootstrap 3 to 1400px. How can i count grid column width and and @grid-gutter-width? How to do that?
我需要在 Bootstrap 3 到 1400px 中使用自定义容器。我如何计算网格列宽和@grid-gutter-width？怎么做？
Thanks.
谢谢。
采纳答案by Golam Mortuza
If you use bootstrap SASS port you can easily do that by changing _bootstrap-variables.scss.
如果您使用引导 SASS 端口，您可以通过更改_bootstrap-variables.scss.
In _bootstrap-variables.scsssearch for $container-large-desktopand change its value to (1370px + $grid-gutter-width).
在_bootstrap-variables.scss寻找$container-large-desktop和改变它的价值(1370px + $grid-gutter-width)。
Default $grid-gutter-widthis 30 px. You can change it also.
If you change $grid-gutter-widththen change the $container-large-desktopaccordingly to get your container size 1400px.
默认$grid-gutter-width值为 30 像素。你也可以改变它。
如果您更改，$grid-gutter-width则$container-large-desktop相应地更改以获得您的容器大小 1400 像素。
To know how to work with bootstrap SASS check it out : https://github.com/twbs/bootstrap-sass
要了解如何使用 bootstrap SASS，请查看：https: //github.com/twbs/bootstrap-sass
回答by coder618
To change the container size from core, you have to declare your bootstrap container variable again, if you use bootstrap scss.
要从核心更改容器大小，如果使用 bootstrap scss，则必须再次声明 bootstrap 容器变量。
$container-max-widths: ( md: 720px, lg: 960px, xl: 1140px ) ;
回答by Alex
Better you should use Bootstrap fluid layout, like:
最好使用 Bootstrap 流体布局，例如：
CSS
CSS
.wrapper{
width: 1400px;
margin: 0 auto;
}
HTML
HTML
<div class="wrapper">
<div class="container-fluid"></div>
</div>
You can checkout this page to know more about Bootstrap fluid layout - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fluid-layout.php
您可以查看此页面以了解有关 Bootstrap 流体布局的更多信息 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fluid-layout.php
回答by Artur Boytsov
Best and simpliest solution I found myself:
我发现自己的最佳和最简单的解决方案：
You use .container-fluidinsted of .containerand add @mediarequest in CSS with min-widthlittle bit higher than required:
您使用.container-fluidinsted of.container并@media在 CSS 中添加min-width比要求高一点的请求：
@media (min-width: 1405px) {
.container-fluid{
width: 1400px;
}
}
End enjoy!
结束享受！
回答by Billy Moat
You can change the container width on the Bootstrap customise page at:
您可以在 Bootstrap 自定义页面上更改容器宽度：
http://getbootstrap.com/customize/
http://getbootstrap.com/customize/
Under Container Sizes change @container-large-desktop to your desired size. Remember to take into account the gutters.
在 Container Sizes 下将 @container-large-desktop 更改为您想要的大小。记住要考虑到排水沟。
回答by dariojampy
Under bootstrap version 4 using sass:
在使用 sass 的引导程序版本 4 下：
$container-max-widths: (
xl: 1200px
);
