twitter-bootstrap Bootstrap：如何更改容器的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15884102/
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 do I change the width of the container?
提问by alex
I have used Twitter Bootstrap to develop a website with the fixed container class, but now the client wants the website to be 1000px width and not 1170px. I don't use the .less files.
我已经使用 Twitter Bootstrap 开发了一个带有固定容器类的网站，但现在客户希望网站的宽度为 1000 像素而不是 1170 像素。我不使用 .less 文件。
Is there a quick way to fix this?
有没有快速的方法来解决这个问题？
采纳答案by albertedevigo
Go to the Customizesection on Bootstrap site and choose the size you prefer. You'll have to set @gridColumnWidthand @gridGutterWidthvariables.
转到Bootstrap 站点上的自定义部分，然后选择您喜欢的大小。你必须设置@gridColumnWidth和@gridGutterWidth变量。
For example: @gridColumnWidth = 65pxand @gridGutterWidth = 20pxresults on a 1000pxlayout.
例如：@gridColumnWidth = 65px和布局@gridGutterWidth = 20px上的结果1000px。
Then download it.
然后下载它。
回答by mcbjam
Here is the solution :
这是解决方案：
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
The advantage of doing this, versus customizing Bootstrap as in @Bastardo'sanswer, is that it doesn't change the Bootstrap file. For example, if using a CDN, you can still download most of Bootstrap from the CDN.
与在@Bastardo 的回答中自定义 Bootstrap 相比，这样做的优势在于它不会更改 Bootstrap 文件。例如，如果使用 CDN，您仍然可以从 CDN 下载大部分 Bootstrap。
回答by Bastardo Sucio
You are tying one had behind your back saying that you won't use the LESS files. I built my first Twitter Bootstrap theme using 2.0, and I did everything in CSS -- creating an override.css file. It took days to get things to work correctly.
你在背后说你不会使用 LESS 文件。我使用 2.0 构建了我的第一个 Twitter Bootstrap 主题，并且我在 CSS 中完成了所有工作——创建了一个 override.css 文件。花了几天时间才使事情正常工作。
Now we have 3.0. Let me assure you that it takes less time to learn LESS, which is pretty straight forward if you're comfortable with CSS, than doing all of those crazy CSS overrides. Making changes like the one you want is a piece of cake.
现在我们有了 3.0。让我向您保证，学习 LESS 所需的时间更少，如果您对 CSS 感到满意，这将非常简单，而不是进行所有这些疯狂的 CSS 覆盖。做出你想要的改变是小菜一碟。
In Bootstrap 3.0, the container class controls the width, and all of the contained styles adjust to fill the container. The container width variables are at the bottom of the variables.less file.
在 Bootstrap 3.0 中，容器类控制宽度，所有包含的样式都会调整以填充容器。容器宽度变量位于 variables.less 文件的底部。
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-lg-desktop: ((1020px + @grid-gutter-width));
Some sites either don't have enough content to fill the 1020 display or you want a narrower frame for aesthetic reasons. Because BS uses a 12-column grid I use a multiple like 960.
某些站点要么没有足够的内容来填充 1020 显示屏，要么出于美学原因您想要更窄的框架。因为 BS 使用 12 列网格，所以我使用像 960 这样的倍数。
回答by Jeff Schwarting
@mcbjam already gave this answer but here's a bit more explanation.
@mcbjam 已经给出了这个答案，但这里有更多的解释。
You can easily make the change using a media query in your CSS file without downloading BS. I just did this and it works beautifully.
您可以在 CSS 文件中使用媒体查询轻松进行更改，而无需下载 BS。我只是这样做了，而且效果很好。
The media query's "min-width" value will tell CSS to change the width of your container to 1000px onlyon screens larger than 1200px (or whatever width you choose to include there). This preserves the responsiveness of your site, so when the screen size jumps below that value (smaller monitor, tablet, smartphone, etc.), your site will still adjust to fit the smaller screens.
媒体查询的“min-width”值将告诉 CSS仅在大于 1200px（或您选择包含的任何宽度）的屏幕上将容器的宽度更改为1000px。这会保留您网站的响应能力，因此当屏幕尺寸低于该值（较小的显示器、平板电脑、智能手机等）时，您的网站仍会进行调整以适应较小的屏幕。
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
回答by Geo
Set your own content container class with 1000px width property and then use container-fluidboostrap class instead of container.
使用1000px宽度属性设置您自己的内容容器类，然后使用container-fluidboostrap 类而不是容器。
Works but might not be the best solution.
有效，但可能不是最佳解决方案。
回答by Kaizoku Gambare
For bootstrap 4 if you are using Sass here is the variable to edit
对于 bootstrap 4，如果您使用的是 Sass，这里是要编辑的变量
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
To override this variable I declared $container-max-widths without the !default in my .sass file before importing bootstrap.
为了覆盖这个变量，我在导入引导程序之前在我的 .sass 文件中声明了 $container-max-widths 而没有 !default。
Note : I only needed to change the xl value so I didn't care to think about breakpoints.
注意：我只需要更改 xl 值，所以我不在乎考虑断点。
回答by Larry Judd
Use a wrapper selector and create a container that has a 100% width inside of that wrapper to encapsulate the entire page.
使用包装器选择器并创建一个在该包装器内部具有 100% 宽度的容器以封装整个页面。
<style>#wrapper {width: 1000px;}
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
<div class="container">
<div class="row">....
Now the maximum width is set to 1000px and you need no less or sass.
现在最大宽度设置为 1000 像素，你不需要更少或 sass。
回答by So Santo
Container sizes
容器尺寸
@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)
in section Container sizes, change 1140to 970
在容器尺寸部分，更改1140为970
I hope its help you.
我希望它对你有帮助。
thank you for your correct. link for customize bootstrap: https://getbootstrap.com/docs/3.4/customize/
谢谢你的正确。自定义引导程序链接：https: //getbootstrap.com/docs/3.4/customize/
回答by Mahendra
Add these piece of CSS in your css styling. Its better to add this after the bootstrap css file is added in order to overwrite the same.
在您的 css 样式中添加这些 CSS。最好在添加 bootstrap css 文件后添加它以覆盖相同的文件。
html, body {
height: 100%;
max-width: 100%;
overflow-x: hidden;
}`
