将桌面的 Bootstrap 网格和容器宽度从 1170 像素更改为 1000 像素

Question

任何人都知道如何将引导程序中的网格容器从标准的 1170 像素更改为 12 列的 1000 像素。我一直在尝试更改 variables.less 中的列宽和装订线宽度，但无法更改任何内容。

非常感谢

帕特里克

正在尝试这个：

// 1200px min

@gridColumnWidth1200: 65px;

@gridGutterWidth1200: 20px;

@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

Answer 1

我假设您在谈论引导程序 2.3.2，而不是版本 3。如果是这样，在 variables.less 中您有以下代码：

// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

它指向所有涉及的变量和数学......对变量进行适当的更改，使其加起来符合您正在寻找的新大小。也许您正在更改 gridColumnWidth 而不是 gridColumnWidth1200