我需要一些帮助将bootstrap 2.0.4设置为16或24列而不是默认的12列我不能理解我做错了什么我尝试了bootstrap站点上的自定义选项,我尝试更改variables.less文件中的网格变量并使用Crunch重新编译bootstrap.less,但对于两次试验,我仍然得到相同的结果.it仍然是12列!!当我尝试设置一个div为span12时,它仍然需要整个屏幕?
有没有人可以指导我到底做错了什么,或者如果有人能生成一个16列和24列的版本并将它们发送给我,那就太好了
发布于 2013-03-02 18:06:40
此方法适用于旧版本的Bootstrap -版本2.3.1
单击此链接以自定义引导:
http://twitter.github.com/bootstrap/customize.html
你会发现像这样的例子。更改参数以满足您的需要。
16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px
16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px
24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px
24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
发布于 2015-02-20 15:10:54
对于24列,您可以拆分主div
nothing
nothing
nothing
nothing
nothing
nothing
nothing
nothing
nothing
nothing
nothing
nothing
12 here
codepen演示
发布于 2012-07-22 08:54:48
足够简单,可以在较少的时间内改变-
http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization
您需要将那里的变量更改为您想要的变量-
例如:
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px
如果使用流体网格,您也需要按比例更改这些变量,否则span12仍将占据100%的宽度,而span24将占据200%的宽度。
@fluidGridColumnWidth
@fluidGridGutterWidth
如上所述:
如何定制
修改网格意味着更改三个@网格
*
变量和重新编译Bootstrap。更改variables.less中的网格变量,并使用文档中的四种方法之一重新编译。如果要添加更多列,请确保为grid.less中的列添加CSS。
您可以在此处更改变量并下载新的css:
http://twitter.github.com/bootstrap/download.html#variables
下面是一个编译后的示例,它应该适用于16列(尚未测试,请让我知道它是如何工作的):
https://s3.amazonaws.com/intenex/bootstrap16columns.zip
https://stackoverflow.com/questions/11591185
复制相似问题