如何使用引导与16个或24列(How to use bootstrap with 16 or 24

我需要一些帮助设置引导2.0.4为16或24列，而不是默认的12列我不明白我在做什么错了，我试图在引导网站上的自定义选项，我试图在变量变更网格变量.LESS文件，并使用bootstrap.less紧缩，但对于这两个试验我仍然有同样的结果。它仍然是12列重新编译！ 当我尝试设置一个div被span12它仍然需要整个屏幕？

任何人都可以引导我什么是错的我在做什么，或者如果有人能产生16级24列的版本，并将其发送给我，这将是完美的

Answer 1:

这个方法是一个旧版本的引导程序 - 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

Answer 2:

对于24个colums可以拆分主DIV

<div class="col-md-12">

    <div class="col-md-6">
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
    </div>

    <div class="col-md-6">12 here</div>

</div>

codepen演示

Answer 3:

足够简单较少的改变- http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization

你会希望有改变的变量，你想要的东西 -

如

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

如果使用流体网格，你要改变比例这些变量太多，否则span12仍然会占用宽度和span24的100％会占用200％

@fluidGridColumnWidth
@fluidGridGutterWidth

就像声明的那样：

如何定制

修改网格意味着改变三个@电网*变量并重新编译引导。 更改网格变量variables.less和使用记录，以重新编译四种方式之一。 如果您要添加更多的列时，一定要添加CSS对于那些在grid.less。

你可以改变的变量，在这里下载新的CSS： http://twitter.github.com/bootstrap/download.html#variables

这里有一个例子编译应为16列工作（没有测试过，让我知道它是如何工作）： https://s3.amazonaws.com/intenex/bootstrap16columns.zip

Answer 4:

编辑：有列的自定义数字创造电网已经恢复，并且可以引导的上进行定制页面 。

因为在我的原因不明，引导的最新版本（3.0.0 / 1）不允许你创建网格超过12列，这是一个很大的耻辱不同。

我们所能做的现在，而这将反过来允许创建更加个性化的引导包，就是建立自己的引导定制。

编辑：我刚刚试了一下。 安装所有的依赖就比较顺利，而坚持自己的文档的GitHub页面上的准则。

样品产生24柱网

Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.

Answer 5:

16列

960像素

×45像素* 16 = 720列

15像素* 16 = 240天沟

1200像素

53px * 16 = 848列

的22px * 16 = 352名男孩

768px

33px * 16 = 528列

15像素* 16 = 240天沟

Answer 6:

更新2018

再谈这个问题的最新引导4.现在，引导4 Flexbox的，并包括自动布局栏 ，可以很容易地与任意数量的n列的创建布局 ...

16列

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 16
            </div>
</div>

24列

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 24
            </div>
</div>

演示： https://www.codeply.com/go/4sQGt2qKyr

---

也参见： 在自举4列的N个

Answer 7:

设置24列：

960
35px列
5px的天沟

1200
40像素列
10px的天沟

768
29px列
3px的天沟

Answer 8:

这里是一个快速简便的方法，我发现使用嵌套做16列...

 .no-padding { padding-left: 0 !important; padding-right: 0 !important; } 

 <div class="row"> <div class="col-md-3 no-padding"> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> </div> <div class="col-md-3 no-padding"> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> </div> <div class="col-md-3 no-padding"> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> </div> <div class="col-md-3 no-padding"> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> <div class="col-md-3"> col </div> </div> </div> <!-- row --> 

Answer 9:

我用网30列我的项目（网格24和100也可）

https://github.com/zirafa/bootstrap-grid-only

一些定制可以根据您的要求需要

Answer 10:

您可以覆盖与这样的百分比width属性：

    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>

它甚至会保持响应能力。

文章来源: How to use bootstrap with 16 or 24 columns