Bootstrap 3 - 940px 宽度网格？答案

【问题标题】：Bootstrap 3 - 940px width grid?Bootstrap 3 - 940px 宽度网格？
【发布时间】：2013-10-15 00:19:44
【问题描述】：

我在一个新项目中使用 Bootstrap 3。布局是最大宽度 940 像素（桌面等），12 列（60 像素列，20 像素装订线）。

我已将.container 设置为max-width: 940px;，但这会使网格关闭，出于某种原因。这给了我 50px 列和 30px 装订线。所以我需要将装订线减少到 20px 并将 10px 添加到列中。

但是我该怎么做呢？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

用途：

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

注意：970 减去 30 像素（间距）为您的设计带来 940 像素。

更新

见：http://bootply.com/86257

将@grid-gutter-width 设置为 20px；并重新编译引导程序。

在这种情况下，您的 .container /.row 将具有 960 像素的宽度。在 variabless.less 中定义： @container-desktop: ((940px + @grid-gutter-width));

注意如果在 variables.less 中设置@container-large-desktop: @container-desktop 我不需要上面的媒体查询。

【讨论】：

是的，但这仍然会使列和排水沟的宽度错误？我得到的设计规范说 4 列中的图片是 300 像素宽 - 当前设置不会发生这种情况？
你能添加一个你设计的屏幕吗？另请参阅getbootstrap.com/css/#grid 中网格 (970) 的最大列宽为 ((970 - gutter /12)) 78px。 4 x 78 为 312。包括排水沟。你可以通过添加类img-responsive 来制作你的图片。
我在上面添加了一张网格的图片。 940 像素宽度。 60px 列和 20px 装订线。可能吗？

【解决方案2】：

最好的选择是使用原始 LESS 版本的引导程序（从 github 获取）。

打开 variables.less 并查找 // 媒体查询断点

// Large screen / wide desktop
@screen-lg:                  1200px; // change this
@screen-lg-desktop:          @screen-lg;

例如，将最后一个断点更改为 9999px，这将阻止到达此断点，因此您的站点始终会加载上一个媒体查询：

@screen-md:                  992px; // this one has 940px container
@screen-desktop:             @screen-md;

要更改列宽和装订线，请在同一文件中向下滚动一点并查找

// 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;

这里可以配置

最后，ofcource 在 css 中编译 bootstrap.less 文件。

干杯

【讨论】：

【解决方案3】：

您必须在 bootstrap.responsive.css 中注释以下部分才能启动 940 视图

@media (min-width: 1200px) {
}

【讨论】：

不确定我是否理解此回复？
Bootstrap 3 没有 bootstrap.responsive.css 文件。