Twitter bootstrap 自定义引导3中的列数 更新:

Twitter bootstrap 自定义引导3中的列数 更新:,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,对于任何遇到这个问题的人:这个问题似乎已经在随后的Bootstrap更新中得到了解决。现在,您可以下载自定义的Bootstrap 3版本,使用@grid columns设置指定所需的列数 原始问题: 我试图自定义Bootstrap3网格系统,使其使用24列,而不是默认的12列 正如许多答案中所建议的,我正试图通过修改@gridColumns、@gridColumnWidth和@gridGutterWidth变量,使用Bootstrap的“定制和下载”页面定制资产 但Bootstrap3似乎已经

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

原始问题: 我试图自定义Bootstrap3网格系统,使其使用24列,而不是默认的12列

正如许多答案中所建议的,我正试图通过修改@gridColumns@gridColumnWidth@gridGutterWidth变量,使用Bootstrap的“定制和下载”页面定制资产

但Bootstrap3似乎已经消除了这些变量:

  • Bootstrap 3自定义页面(例如,no@gridColumns):

  • 引导程序2自定义页面(例如,@gridColumns选项可用):


在Bootstrap 3中实现这一点的推荐方法是什么?非常感谢

Twitter Bootstrap 3.0.0的定制程序没有设置网格列数的选项。计划在下一版本3.0.1中使用,请参见:

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

网格列是使用Grid.less中的mixin动态定义的。您可以将网格列更改为任意数字并重新编译。

您也可以签出

。。。我在我的博客文章中写了更多关于为什么你会想使用它的细节,以防你好奇

简而言之,你不想改变Twitter引导,因为它是一个更新频率足够高的项目,你会一直对自己的编辑感到恼火


对于开源项目来说,这通常是一个很好的实践——如果您可以以非破坏性和非侵入性的方式在开源项目之上做任何事情,那么您应该首先这样做。你最后的努力是改变项目的来源。

很晚了,但我用更少的资源构建了一个解决方案,不需要修改引导。

如果您自己编译无引导程序,这将设置24列。请记住,
@格线槽宽度
必须为
px
em
单位不起作用

@网格边沟宽度:14px

@网格列:24

从下载最新版本并编译您自己的版本。variables.less定义@grid columns,因此您可以在此处对其进行更改。同时在上发布一个问题,并询问
@gridColumns
设置的Gonethaks、Bass位置。我正试图在Windows机器上解决这个问题。所以我需要安装NPM和Node.js来编译
bootstrap master/less/
目录中的文件?对不起,我对Windows一无所知。自述文件告诉您:“1.使用
npm Install-g grunt cli
全局安装
grunt cli
。2.导航到根
/bootstrap
目录,然后运行
npm Install
。npm将查看[package.json](package.json)并自动安装此处列出的必要的本地依赖项。”在这次运行之后,
grunt dist
只编译js和css。哦,伙计,好吧,编译引导可能比我现在想涉入的更深的水域,只是为了覆盖一些变量定义。我现在打算放弃,希望以后能重新开始。谢谢你让我开始。如果你给我发一封电子邮件,我会给你发一个24列的编译版本。这是不正确的,使用Bootstrap 3.0.0,如果你愿意,你可以继续更改
@grid columns
,但是列1-12是硬编码到
网格中的。更少的
你要做的就是更改列1-11的宽度,12将仍然是100%,而您将没有13-24。@PaulEnglish donwload从github加载最新版本将解决此问题。grid.less已更改,列不再硬编码。或者,您可以执行Grunt任务以始终拉入并更改网格设置。这将比手动过程更方便。尽管如此,我还是发现这个小小的JavaScript解决方案更方便,因为你可以混合和匹配你的专栏(更不用说你可以从Twitter引导加载CDN)。SASS也有这个解决方案吗?@Bart不抱歉-如果你在SASS中遇到/开发了类似的东西,请告诉我,我会从GH链接到它。