Bootstrap 3 - 940px宽度网格？

Question

我在一个新项目上使用Bootstrap 3。布局最大宽度为940px（桌面等），12 col（60px柱，20px天沟）。

我已将.container设置为max-width: 940px;但由于某种原因，这会使网格关闭。这给了我50px柱子和30px排水沟。因此，我需要将排水沟减少到20px并将10px添加到色谱柱中。

但我该怎么做？

Answer 1

使用：

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

注意：970减30px（装订线）为您的设计制作940px。

<强>更新

请参阅：http://bootply.com/86257

将@ grid-gutter-width设置为20px;并重新编译bootstrap。

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

请注意，如果在变量中设置@container-large-desktop: @container-desktop，我不需要上面的媒体查询。

Answer 2

最好的选择是使用原始LESS版本的bootstrap（从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; 

您可以在此配置

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

干杯

Answer 3

您必须在bootstrap.responsive.css中对以下部分发表评论以启动940视图

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