Bootstrap 3 - 940px 宽度的网格? [英] Bootstrap 3 - 940px width grid?

问题描述

我在一个新项目中使用 Bootstrap 3.布局的最大宽度为 940 像素(桌面等)，12 列(60 像素列，20 像素间距).

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).

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

I've set .container to 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.

但是我该怎么做呢?

推荐答案

使用:

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

注意:970 减去 30 像素(装订线)使您的设计达到 940 像素.

Note: 970 minus 30px (gutter) makes 940px for your design.

更新

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

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

Set @grid-gutter-width to 20px; and recompile bootstrap.

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

In this case your .container /.row will have a width of 960px. Defined in variabless.less: @container-desktop: ((940px + @grid-gutter-width));

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

Note if setting @container-large-desktop: @container-desktop in variables.less i don't need the media query above.

这篇关于Bootstrap 3 - 940px 宽度的网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！