CSS 如何更改默认 Bootstrap Fluid Grid 12 列装订线宽度

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

提问by Raphael Rafatpanah

I am looking to know if there is any simplesolution known to change the gutter with on the fluiddefault 12 grid bootstrap system (2.3.0).

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

I am not familiar with LESS but if that is the answer, please also describe how to could be changed. The same with Sass.

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

Please note that it is perfectly acceptable to change the gutter width, by halfor one fourth, for example if that may make things simpler.

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

The following goals must be met:

必须达到以下目标：

1. Must be able to update bootstrap in the future. This means not editing the actual bootstrap files.
2. Functionality should remain for all other objects.
3. Must be simple. Less than 10 lines of CSS. For example, an added class or something.

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

I have searched throughout Stack Overflow and still have no idea how I may go about doing something like this. To the best of my understanding, downloading a customized Bootstrap only renders custom gutter widths for non-fluid grids. I have coded my own fluid grid system before, so I understand the math, but I am worried there may be consequences and it would be helpful if any known issues on class overrides could be shared.

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

I promise to give credit where it is due.

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

UPDATE:

更新：

Changing the less variables as described in Yoda's answer is the way to go. Does anyone have any experience changing these less variables? For example, I believe the variables that have to be changed are the following:

按照尤达的回答中的描述更改较少的变量是要走的路。有没有人有任何改变这些较少变量的经验？例如，我认为必须更改的变量如下：

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

How does one go about changing something like this? Perhaps:

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

@fluidGridGutterWidth768:      percentage(1.5);  

If anyone has done this before, I would appreciate a shove in the right direction.

如果有人以前做过这件事，我会很感激朝着正确的方向前进。

采纳答案by Siddharth Pandey

The easiest way is probably to use the Customizable download that Twitter Bootstrap provides. Change the @fluidGridGutterWidth variable to suit your needs in the form. Download the less files from here. You can access the variable.less file from the github bootstrap project and then change this piece of code:

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

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

I thought you had access to less files at first, then I realized you are using the customized gui on the website. Just download the less files, and make your changes. Then compile the less files to give you a css file or use less for development. You can use css or min.css for deployment.

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

回答by Donny V.

I think you might be over thinking it. The problem with changing the LESS variables is that it will change it for all gutters. So if I like the 15px gutter for arranging the over all layout but want the gutter to be 5px for a form inside that grid it won't work.

我想你可能想多了。更改 LESS 变量的问题在于它会为所有装订线更改它。因此，如果我喜欢 15px 的装订线来安排整个布局，但希望该网格内的表单的装订线为 5px，它将不起作用。

Just create 2 css classes to override the areas you want to change the gutter.

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

Apply this at the "row" level.

在“行”级别应用它。

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

Apply this at the "column" level.

在“列”级别应用它。

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

demo: http://jsfiddle.net/tg7Ey/

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

回答by thiscode

I was looking for a simple solution for this problem, too. My goal was to use simple CSS, not LESS. This answer as like any other i found, based on compiling LESS or using the online compiler of bootstrap. So i tried to find my own solution.

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

Reading the documentation you will find the following about the gutter-width: Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

阅读文档，您会发现以下有关装订线宽度的信息：列通过填充创建装订线（列内容之间的间隙）。该填充通过 .rows 上的负边距在第一列和最后一列的行中偏移。

Based on this i tried the following:

基于此，我尝试了以下操作：

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

From now the gutter width was only 2 pixel. My next problem was, that my intended width was an odd number. My solution was to remove the paddings and margins on the left and put them completely on the right:

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

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

Now i have a 5 pixel gutter width.

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

I did not tested this in all possible scenarios you can use bootstrap. Especially you have to pay attention to use only column-div's inside a row-div inside a container-div. But in my case it was a very effective solution without touching the origin source code of bootstrap or using a LESS compiler.

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