18

更新：

对于遇到此问题的任何人：此问题似乎已在 Bootstrap 的后续更新中得到解决。您现在可以下载自定义 Bootstrap 3 构建，使用@grid-columns设置指定所需列的数量。

http://getbootstrap.com/customize/

原始问题：

我正在尝试自定义 Bootstrap 3 网格系统以使用 24 列而不是默认的 12 列。

正如这里的许多答案所建议的那样，我正在尝试通过修改@gridColumns、@gridColumnWidth和@gridGutterWidth变量来使用 Bootstrap 的“自定义和下载”页面来自定义资产。

但是 Bootstrap 3 似乎已经取消了这些变量：

在 Bootstrap 3 中实现这一目标的推荐方法是什么？非常感谢！

4

4 回答 4

6

Twitter 的 Bootstrap 3.0.0 的定制器没有设置网格列数的选项。将计划在下一个版本 3.0.1 中使用，参见：https ://github.com/twbs/bootstrap/issues/10985

此外，当您从 github.com/twbs/bootstrap/archive/master.zip 下载最新版本并编译您自己的版本时。在 variables.less 中设置 @grid-columns 是不够的。网格列的类名在 grid.less 中硬编码，您也必须更改/添加这些。另见：https ://github.com/twbs/bootstrap/issues/10990

网格列现在使用 grid.less 中的 mixins 动态定义。您可以更改@grid-columns为任何数字并重新编译。

于 2013-10-09T21:34:56.803 回答
1

如果您自己编译引导程序 LESS，这将设置 24 列。请记住，@grid-gutter-width必须在px，em单位将不起作用。

@grid-gutter-width: 14px;
@grid-columns: 24;

于 2016-05-03T16:46:53.427 回答
0

您还可以查看http://tmaiaroto.github.io/gridline/

...我会在我的博客文章http://www.shift8creative.com/posts/view/flexible-twitter-bootstrap-grid中写下有关您为什么要使用它的更多详细信息，以防您好奇。

简而言之……您不想更改 Twitter Bootstrap，因为它是一个更新频率足够高的项目，您会一直对进行编辑感到恼火。

对于开源项目来说，这通常是一种很好的做法——如果你可以在它们之上以非破坏性和非侵入性的方式做任何事情，你应该更愿意先做。你最后的努力是改变项目的来源。

于 2013-12-06T21:44:00.697 回答
0

晚了，但我使用 LESS 构建了一个不需要修改 Bootstrap 的解决方案。 https://github.com/drew-r/bootstrap-n-column

于 2014-11-19T16:25:41.070 回答