twitter-bootstrap 自定义 Bootstrap 3 中的列数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19253088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customizing number of columns in Bootstrap 3
提问by tino
Update:
更新：
For anyone who happens upon this question: This issue seems to have been resolved in a subsequent update to Bootstrap. You can now download a custom Bootstrap 3 build, specifying the number of desired columns with the @grid-columnssetting.
对于遇到此问题的任何人：此问题似乎已在 Bootstrap 的后续更新中得到解决。您现在可以下载自定义 Bootstrap 3 版本，并通过@grid-columns设置指定所需的列数。
http://getbootstrap.com/customize/
http://getbootstrap.com/customize/
Original Question:
原问题：
I'm trying to customize the Bootstrap 3 grid system to use 24 columns rather than the default 12.
我正在尝试自定义 Bootstrap 3 网格系统以使用 24 列而不是默认的 12 列。
As recommended in a number of answers here, I'm attempting to customize the assets using Bootstrap's "Customize and Download" page by modifying the @gridColumns, @gridColumnWidth, and @gridGutterWidthvariables.
正如这里的许多答案所建议的那样，我试图通过修改@gridColumns、@gridColumnWidth和@gridGutterWidth变量，使用 Bootstrap 的“自定义和下载”页面来自定义资产。
But Bootstrap 3 seems to have done away with those variables:
但是 Bootstrap 3 似乎已经取消了这些变量：
Bootstrap 3 customization page (e.g., no @gridColumns):
http://getbootstrap.com/customize/Bootstrap 2 customization page (e.g., @gridColumns option available):
http://getbootstrap.com/2.3.2/customize.html
Bootstrap 3 自定义页面（例如，没有 @gridColumns）：http://getbootstrap.com/customize/
Bootstrap 2 自定义页面（例如，@gridColumns 选项可用）：http://getbootstrap.com/2.3.2/customize.html
What would be the recommended way of achieving this in Bootstrap 3? Many thanks!
在 Bootstrap 3 中实现这一目标的推荐方法是什么？非常感谢！
采纳答案by Bass Jobsen
The customizer for Twitter's Bootstrap 3.0.0 don't have a option the set the number of grid columns. It will be planned for the next release 3.0.1, see: https://github.com/twbs/bootstrap/issues/10985
Twitter 的 Bootstrap 3.0.0 的定制器没有设置网格列数的选项。将计划用于下一个版本 3.0.1，请参阅：https: //github.com/twbs/bootstrap/issues/10985
Also when you download the latest version from github.com/twbs/bootstrap/archive/master.zip and compile your own version. setting @grid-columns in variables.less won't be enough. The class names of the grid columns are hard coded in grid.less, you will have to change / add these too. See also: https://github.com/twbs/bootstrap/issues/10990
此外，当您从 github.com/twbs/bootstrap/archive/master.zip 下载最新版本并编译您自己的版本时。在 variables.less 中设置 @grid-columns 是不够的。网格列的类名在 grid.less 中硬编码，您也必须更改/添加这些。另见：https: //github.com/twbs/bootstrap/issues/10990
Grid columns are defined dynamically with mixins in grid.less now. You can change @grid-columnsto any number and recompile.
网格列现在使用 grid.less 中的 mixins 动态定义。您可以更改@grid-columns为任何数字并重新编译。
回答by BrandonReid
This will set 24 columns if you're compiling the bootstrap LESS yourself. Remember that the @grid-gutter-widthhas to be in px, emunits won't work.
如果您自己编译引导程序 LESS，这将设置 24 列。请记住，@grid-gutter-width必须在px,em单位将不起作用。
@grid-gutter-width: 14px;@grid-columns: 24;
@grid-gutter-width: 14px;@grid-columns: 24;
回答by Tom
You can also check out http://tmaiaroto.github.io/gridline/
您还可以查看http://tmaiaroto.github.io/gridline/
... I write more details about why you would want to use it in my blog post, http://www.shift8creative.com/posts/view/flexible-twitter-bootstrap-gridin case you were curious.
...我在我的博客文章http://www.shift8creative.com/posts/view/flexible-twitter-bootstrap-grid中写了更多关于你为什么想要使用它的细节，以防你好奇。
To put it short and sweet...You don't want to alter Twitter Bootstrap because it's a project that updates with enough frequency that you're going to get annoyed making your edits all the time.
简而言之……你不想改变 Twitter Bootstrap，因为它是一个更新频率足够高的项目，你会因为一直编辑而烦恼。
This is good practice in general for open source projects -- If there is anything you can do over top of them in a non-destructive and non-invasive manner, you should prefer to do that first. Your last ditch effort is to alter the source of the project.
对于开源项目来说，这通常是一个很好的做法——如果你可以以非破坏性和非侵入性的方式在它们之上做任何事情，你应该更愿意先做。你最后的努力是改变项目的来源。
回答by Drew R
Late but I built out a solution to this using LESS that doesn't require modification of Bootstrap. https://github.com/drew-r/bootstrap-n-column
晚了，但我使用 LESS 构建了一个解决方案，不需要修改 Bootstrap。 https://github.com/drew-r/bootstrap-n-column
