自定义Bootstrap 3中的列数

Question

更新

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

http://getbootstrap.com/customize/

原始问题：

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

根据这里的一些答案中的建议，我试图通过修改 @gridColumns ， @gridColumnWidth ，使用Bootstrap的“自定义和下载”页面来自定义资产和 @gridGutterWidth 变量。

但Bootstrap 3似乎已经废除了这些变量：

• Bootstrap 3自定义页面（例如，没有@gridColumns）：
  http://getbootstrap.com/customize/

• Bootstrap 2自定义页面（例如，@ gridColumns选项可用）：
  http://getbootstrap.com/2.3.2/customize.html

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

Answer 1

Twitter的Bootstrap 3.0.0的自定义程序没有设置网格列数的选项。它将在下一版本3.0.1中进行规划，请参阅：https://github.com/twbs/bootstrap/issues/10985

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

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

Answer 2

如果你自己编译bootstrap LESS，这将设置24列。请注意，@grid-gutter-width必须位于px，em单位才能使用。

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

Answer 3

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

...我在博客文章http://www.shift8creative.com/posts/view/flexible-twitter-bootstrap-grid中写了更多关于你为什么要使用它的细节，以防万一你好奇。

简而言之......你不想改变Twitter Bootstrap，因为它是一个以足够的频率更新的项目，你会一直烦恼地进行编辑。

这对于开源项目来说是一般的好习惯 - 如果你能以非破坏性和非侵入性的方式做任何事情，你应该首先这样做。你最后的努力是改变项目的来源。

Answer 4

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