如何更改默认引导流体网格12列槽宽度 [英] How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

问题描述

我想知道是否有任何简单解决方案可以改变流体默认12网格引导系统（2.3.0）。 p>

我不熟悉LESS，但如果这是答案，还请描述如何可以改变。与Sass相同。

请注意，完全可以改变沟槽宽度，减半或强>，例如如果这可以使事情更简单。

必须满足以下目标：

1. 必须能够更新引导程序在将来。


2. 所有其他对象的功能应保留。


3. 必须是简单的。少于10行的CSS。例如，添加的类或某事。

我在Stack Overflow中搜索过，但仍然不知道我该怎么做喜欢这个。根据我的理解，下载自定义Bootstrap仅呈现非流体网格的自定义槽宽。我之前编写了我自己的流体网格系统，所以我理解数学，但我担心可能会有后果，如果任何已知的问题上覆盖类可以共享是有帮助的。

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

UPDATE：

如Yoda的回答所述，更改较少的变量是一种方法。有没有任何经验更改这些较少的变量？例如，我相信必须更改的变量如下：

  //流网格
 // ------------------------- 
 @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）; 
  

如果有人这样做，我会感谢一个正确的方向。

解决方案

最简单的方法是使用Twitter Bootstrap提供的可自定义下载。更改@fluidGridGutterWidth变量以适应您在表单中的需要。 从此处下载较少的文件。您可以从github引导项目访问variable.less文件，然后更改这段代码：

  //流体网格
 // ------------------------- 
 @fluidGridColumnWidth：percentage（@ gridColumnWidth / @ gridRowWidth）; 
 @fluidGridGutterWidth：percentage（@ gridGutterWidth / @ gridRowWidth）; //< = this one 
  

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

I am looking to know if there is any simple solution known to change the gutter with on the fluid default 12 grid bootstrap system (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.

Please note that it is perfectly acceptable to change the gutter width, by half or 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.

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.

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.

解决方案

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:

    // 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.

这篇关于如何更改默认引导流体网格12列槽宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！