如何更改默认引导流体网格 12 列装订线宽度

Posted 2023-03-06

【中文标题】如何更改默认引导流体网格 12 列装订线宽度

【英文标题】：How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

【发布时间】：2013-01-27 05:44:52

【问题描述】：

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

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

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

必须达到以下目标：

将来必须能够更新引导程序。这意味着不编辑实际的引导文件。 应保留所有其他对象的功能。 必须简单。不到 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);  

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

【问题讨论】：

如果您有答案，请编辑到现有接受的答案；或写下你自己的答案。答案不应该放在问题中（这就是为什么它们被称为问题）。

【参考方案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 进行部署。

【讨论】：

描述你的意思。仅供参考，链接已失效。我没有在引导程序的自定义项中找到任何 @fluidGridGutterWidth 变量。

每个媒体查询只有静态的装订线宽度变量。

我现在给了你一个 +1，一旦我得到这个工作，我会给你一个复选标记。谢谢。

它应该可以工作，这取决于您在 percent() 中使用的内容，因为您可以看到您现在拥有源代码，无论编译成 css 文件都是您的逻辑

我确实有较少的文件，但它看起来并不直观。也许您可以为我指明正确的开始方向。例如，我会在这里改变什么，忘记数学：fluidGridGutterWidth1200: percent(gridGutterWidth1200/gridRowWidth1200);我是否将其设为fluidGridGutterWidth1200：百分比（1.5）？由于评论限制，我去掉了 at 符号。

【参考方案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/

【讨论】：

这似乎是唯一真正适用于我正在测试的场景的纯 CSS 解决方案。

【参考方案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 像素的排水沟宽度。

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

【讨论】：

您使用的是什么 boostrap 版本？您知道在getbootstrap.com 找到的新版本吗？

我确实用的是3.0.2版