Bootstrap 3 - 940像素宽度网格？

Question

Bootstrap 3 - 940像素宽度网格？

twitter-bootstraptwitter-bootstrap-3

3

我正在一个新项目中使用Bootstrap 3。布局的最大宽度应该是940像素（桌面等），有12列（60像素列，20像素间距）。

我已将.container设置为max-width: 940px;，但由于某种原因，这样会使网格偏移。这会给我带来50像素的列和30像素的间距。所以我需要把间距缩小到20像素并将10像素添加到列上。

但是我该怎么做呢？

- brother

3个回答

1

最好的选择是使用原始的Bootstrap LESS版本（从Github获取）。

打开variables.less文件并查找// Media queries breakpoints。

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

将最后一个断点更改为9999像素，这样可以防止到达此断点，因此您的网站始终会加载前一个媒体查询。

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

在这里，您可以进行配置。

最后，当然要将bootstrap.less文件编译成css。

干杯！

- Snade

0

你必须注释 bootstrap.responsive.css 中以下部分以开始 940 视图

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

- Arun

我不确定我理解这个回复的意思？ - brother

Bootstrap 3没有bootstrap.responsive.css文件。 - Bass Jobsen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bass Jobsen · Accepted Answer

使用：

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

注意：970减去30px（间距）后，您的设计宽度为940px。

更新

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

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

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

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