25

我想知道是否有任何已知的简单解决方案可以在流体默认 12 网格引导系统(2.3.0)上更改排水沟。

我不熟悉 LESS,但如果这是答案,还请描述如何更改。萨斯也一样。

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

必须达到以下目标:

  1. 将来必须能够更新引导程序。这意味着不编辑实际的引导文件。
  2. 所有其他对象都应保留功能。
  3. 一定很简单。不到 10 行 CSS。例如,添加的类或其他东西。

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

我保证在应得的地方给予信任。

更新:

如尤达的回答中所述,更改较少的变量是可行的方法。有没有人有改变这些较少变量的经验?例如,我认为必须更改的变量如下:

// 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);  

如果有人以前这样做过,我将不胜感激朝正确的方向推动。

4

3 回答 3

11

最简单的方法可能是使用 Twitter Bootstrap 提供的可定制下载。更改 @fluidGridGutterWidth 变量以满足表单中的需要。从这里下载较少的文件。您可以从 github bootstrap 项目访问 variable.less 文件,然后更改这段代码:

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

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

于 2013-02-12T00:59:21.317 回答
6

我想你可能想多了。更改 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/

于 2014-03-21T02:44:49.920 回答
1

我也在为这个问题寻找一个简单的解决方案。我的目标是使用简单的 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 像素的排水沟宽度。

我没有在您可以使用引导程序的所有可能情况下对此进行测试。特别是您必须注意在容器 div 内的 row-div 内仅使用 column-div。但就我而言,这是一个非常有效的解决方案,无需接触引导程序的原始源代码或使用 LESS 编译器。

于 2013-11-19T12:55:16.363 回答