twitter-bootstrap Bootstrap 3 - 940px 宽度的网格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19241564/
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 3 - 940px width grid?
提问by brother
I am using Bootstrap 3 on a new project. The layout is to be a 940px max width (desktop etc), 12 col (60px column, 20px gutter).
我在一个新项目中使用 Bootstrap 3。布局的最大宽度为 940 像素（桌面等），12 列（60 像素列，20 像素间距）。
I've set .containerto a max-width: 940px;but this makes the grid off, for some reason. This gives me 50px column with 30px gutter. So i need to cut down the gutter to 20px and add the 10px to the column.
我已经设置.container为 amax-width: 940px;但这会使网格关闭，出于某种原因。这给了我 50px 列和 30px gutter。所以我需要将装订线减少到 20 像素并将 10 像素添加到列中。
But how do i do that?
但是我该怎么做呢？
回答by Bass Jobsen
Use:
利用：
@media (min-width: 1200px) {
.container {
max-width: 970px;
}
Note: 970 minus 30px (gutter) makes 940px for your design.
注意：970 减去 30px（装订线）为您的设计制作 940px。
update
更新
Set @grid-gutter-width to 20px; and recompile bootstrap.
将@grid-gutter-width 设置为 20px；并重新编译引导程序。
In this case your .container /.row will have a width of 960px. Defined in variabless.less:
@container-desktop: ((940px + @grid-gutter-width));
在这种情况下，您的 .container /.row 的宽度为 960px。在 variabless.less 中定义：
@container-desktop: ((940px + @grid-gutter-width));
Note if setting @container-large-desktop: @container-desktopin variables.less i don't need the media query above.
请注意，如果@container-large-desktop: @container-desktop在 variables.less 中设置，我不需要上面的媒体查询。
回答by Snade
The best option is to use the original LESS version of bootstrap (get it from github).
最好的选择是使用 bootstrap 的原始 LESS 版本（从 github 获取）。
Open variables.less and look for // Media queries breakpoints
打开 variables.less 并寻找 // 媒体查询断点
// Large screen / wide desktop
@screen-lg: 1200px; // change this
@screen-lg-desktop: @screen-lg;
Change the last breakpoint to 9999px for example, and this will prevent this breakpoint to be reached, so your site always load the previous media query:
例如，将最后一个断点更改为 9999px，这将阻止到达此断点，因此您的站点始终加载之前的媒体查询：
@screen-md: 992px; // this one has 940px container
@screen-desktop: @screen-md;
To change the column width and gutter, scroll a little bit down in the same file and look for
要更改列宽和装订线，请在同一文件中向下滚动一点并查找
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
Here you can configure it
在这里你可以配置它
And finally, ofcource compile bootstrap.less file in css.
最后，ofcource 在 css 中编译 bootstrap.less 文件。
Cheers
干杯
回答by Arun
You must comment the following section in bootstrap.responsive.css for start 940 view
您必须在 bootstrap.responsive.css 中注释以下部分才能启动 940 视图
@media (min-width: 1200px) {
}
