如何更改默认自举流体网格12柱沟宽度

Question

我想知道在流体默认的12网格自举系统(2.3.0)上是否有任何已知的改变排水沟的简单解决方案.

我不熟悉LESS,但如果答案是这样,请说明如何改变.和萨斯一样.

请注意,将沟槽宽度改变一半或四分之一是完全可以接受的,例如,如果这可以使事情变得更简单.

必须满足以下目标:

1. 必须能够在将来更新引导程序.这意味着不编辑实际的引导程序文件.
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提供的Customizable下载.更改@fluidGridGutterWidth变量以满足表单中的需要.从这里下载较少的文件.您可以从github引导程序项目访问variable.less文件,然后更改以下代码:

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

我认为你最初可以访问较少的文件,然后我意识到你正在使用网站上的自定义gui.只需下载较少的文件,然后进行更改.然后编译较少的文件以提供css文件或使用较少的文件进行开发.您可以使用css或min.css进行部署.

Answer 2

我想你可能会过度思考它.更改LESS变量的问题在于它将为所有排水沟更改它.因此,如果我喜欢15px排水沟来安排整个布局,但希望排水沟对于网格内的表格是5px它将无法工作.

只需创建2个css类来覆盖要更改装订线的区域.

在"行"级别应用此选项.

.row-5-gutter{
    margin-left: -5px;
    margin-right: -5px;
}

在"列"级别应用此选项.

.col-5-gutter{
    padding-left: 5px;
    padding-right: 5px;
}

演示:http://jsfiddle.net/tg7Ey/