如何使用 16 或 24 列的引导程序 [英] How to use bootstrap with 16 or 24 columns

问题描述

我需要帮助将引导程序 2.0.4 设置为 16 或 24 列而不是默认的 12 列我不明白我做错了什么我尝试了引导程序站点上的自定义选项并尝试更改网格变量在 variables.less 文件中并使用 Crunch 重新编译 bootstrap.less 但对于这两个试验我仍然有相同的结果.它仍然是 12 列！当我尝试将 div 设置为 span12 时，它仍然需要整个屏幕?

I need some help setting bootstrap 2.0.4 to be 16 or 24 column instead of the default 12 columns i can't understand what am i doing wrong i tried the customize option on the bootstrap site and i tried changing the grid variables in the variables.less file and recompile bootstrap.less using Crunch but for both trials i still have the same result .it is still 12 columns !!! when i try to set a div to be span12 it still takes the whole screen ?

任何人都可以指导我了解我在做什么，或者如果有人可以生成 16 列和 24 列版本并将它们发送给我，那就太完美了

Can anyone guide me to what's wrong i am doing or if someone can generate a 16 and 24 columns versions and send them to me that would be perfect

推荐答案

此方法适用于较旧版本的 Bootstrap - 版本 2.3.1

This method is for an older version of Bootstrap - Version 2.3.1

单击此链接自定义引导程序:http://twitter.github.com/bootstrap/customize.html

Click this link to customize bootstrap: http://twitter.github.com/bootstrap/customize.html

您会找到诸如此类的示例.更改参数以满足您的需要.

You will find examples such as this. Change the parameters to fit your needs.

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

这篇关于如何使用 16 或 24 列的引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！