自定义 Bootstrap 3 中的列数 [英] Customizing number of columns in Bootstrap 3

问题描述

更新:

对于遇到此问题的任何人:此问题似乎已在 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 中实现这一目标的推荐方法是什么?非常感谢！

解决方案

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 更改为任意数字并重新编译.

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-columns setting.

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.

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 @gridGutterWidth variables.

But Bootstrap 3 seems to have done away with those variables:

• 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

What would be the recommended way of achieving this in Bootstrap 3? Many thanks!

解决方案

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

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

Grid columns are defined dynamically with mixins in grid.less now. You can change @grid-columns to any number and recompile.

这篇关于自定义 Bootstrap 3 中的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！