css - 如何更改默认的 Bootstrap Fluid Grid 12 列间距宽度

Question

我想知道是否有任何已知的简单解决方案可以在 fluid 默认 12 网格 Bootstrap 系统 (2.3.0) 上更 retrofit 订线。

我不熟悉 LESS，但如果这是答案，请描述如何更改。 Sass 也是如此。

请注意，改变间距宽度是完全可以接受的，一半或四分之一，例如，如果这可以使事情变得更简单。

必须满足以下目标:

1. 将来必须能够更新 Bootstrap 。这意味着不编辑实际的 Bootstrap 文件。
2. 所有其他对象应保留功能。
3. 必须简单。少于 10 行 CSS。比如加个类什么的。

我在整个 Stack Overflow 中进行了搜索，但仍然不知道我该如何着手做这样的事情。据我所知，下载自定义 Bootstrap 只会呈现非流体网格的自定义间距宽度。我之前编写过自己的流体网格系统，所以我理解数学，但我担心可能会产生后果，如果可以共享有关类覆盖的任何已知问题，这将很有帮助。

我保证在到期时给予信用。

更新:

按照 Yoda 的回答中的描述更改较少的变量是可行的方法。有没有人有改变这些较少变量的经验？例如，我认为必须更改的变量如下:

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

如何改变这样的事情？也许:

@fluidGridGutterWidth768:      percentage(1.5);  

如果有人以前这样做过，我将不胜感激。

Answer 1

最简单的方法可能是使用 Twitter Bootstrap 提供的可自定义下载。更改 @fluidGridGutterWidth 变量以满足您在表单中的需要。 Download the less files from here .您可以从 github bootstrap 元素访问 variable.less 文件，然后更改这段代码:

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

一开始我以为你访问的文件少了，后来我才知道你用的是网站上定制的gui。只需下载较少的文件，然后进行更改。然后编译 less 文件给你一个 css 文件或者使用 less 进行开发。您可以使用 css 或 min.css 进行部署。