Question

我想知道是否有任何简单解决方案已知在流体默认12网格引导程序系统（2.3.0）上更改了装订线。

我不熟悉LESS，但如果答案是这样，请说明如何更改。与萨斯一样。

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

必须满足以下目标：

将来必须能够更新引导程序。这意味着不要编辑实际的引导程序文件。
所有其他对象的功能应保留。
一定要简单。少于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变量以满足表单中的需要。 Download the less files from here。您可以从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类来覆盖您想要更改装订线的区域。

在＆＃34;行＆＃34;水平。

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

在＆＃34;列＃34;水平。

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

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

Answer 3

我也在为这个问题寻找一个简单的解决方案。我的目标是使用简单的CSS，而不是LESS。这个答案就像我发现的任何其他答案一样，基于编译LESS或使用bootstrap的在线编译器。所以我试图找到自己的解决方案。

阅读文档，您将找到有关装订线宽度的以下内容：列通过填充创建装订线（列内容之间的间隙）。该填充在第一列和最后一列的行中通过.rows。

上的负余量进行偏移

基于此，我尝试了以下内容：

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

从现在起，水沟宽度只有2个像素。我的下一个问题是，我的预期宽度是一个奇数。我的解决方案是删除左边的填充和边距，并将它们完全放在右边：

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}

现在我有一个5像素的装订线宽度。

我没有在所有可能的情况下测试这个，你可以使用bootstrap。特别是你必须注意在container-div中的row-div中只使用column-div。但在我的情况下，它是一个非常有效的解决方案，没有触及bootstrap的原始源代码或使用LESS编译器。

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

3 个答案: