Twitter bootstrap 引导3-940px宽的网格?

Twitter bootstrap 引导3-940px宽的网格?,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我正在一个新项目中使用Bootstrap3。布局为940px最大宽度(桌面等),12列(60px列,20px槽) 我已将.container设置为最大宽度:940px但出于某种原因,这会使网格关闭。这给了我50px柱和30px排水沟。所以我需要把排水沟减少到20px,把10px加到柱子上 但是我该怎么做呢 使用: 注:970减去30px(排水沟)使您的设计达到940px 更新 见: 将网格边沟宽度设置为20px;并重新编译引导程序 在本例中,.container/.row的宽度为960px。在v

我正在一个新项目中使用Bootstrap3。布局为940px最大宽度(桌面等),12列(60px列,20px槽)

我已将
.container
设置为
最大宽度:940px但出于某种原因,这会使网格关闭。这给了我50px柱和30px排水沟。所以我需要把排水沟减少到20px,把10px加到柱子上

但是我该怎么做呢

使用:

注:970减去30px(排水沟)使您的设计达到940px

更新

见:

将网格边沟宽度设置为20px;并重新编译引导程序

在本例中,.container/.row的宽度为960px。在variable.less中定义:
@容器桌面:((940px+@网格槽宽度))


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

您必须在bootstrap.responsive.css中对start 940视图的以下部分进行注释

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

最好的选择是使用原始版本的引导(从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文件


干杯

是的,但这仍然会使列和边沟的宽度错误?我得到的设计规范说,4列图片的宽度为300px-这在当前设置中不会发生?你能添加一个设计屏幕吗?另请参见中等网格(970)的最大列宽为((970-槽/12))78px。4乘78等于312。包括排水沟。您可以通过添加类
img responsive
使图像fir。我在上面添加了网格的图片。940px宽。带20px排水沟的60px柱。可能?不确定我是否理解此答复?Bootstrap 3没有Bootstrap.responsive.css文件。
// 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;