Question

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

任何人都可以指导我，我正在做什么，或者有人可以生成16和24列版本并将它们发送给我，这将是完美的

Answer 1

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

单击此链接可自定义bootstrap：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个列，您可以拆分主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 demo

Answer 3

简单到足以改变 - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization

您需要将变量更改为您想要的变量 -

e.g。

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

如果使用流体网格，您也需要按比例更改这些变量，否则span12仍然会占据宽度的100％而span24将占用200％

@fluidGridColumnWidth
@fluidGridGutterWidth

如上所述：

如何自定义

修改网格意味着更改三个@ grid *变量并重新编译Bootstrap。更改variables.less中的网格变量，并使用记录的四种方法之一进行重新编译。如果要添加更多列，请务必为grid.less中的那些添加CSS。

您可以在此处更改变量并下载新的css： http://twitter.github.com/bootstrap/download.html#variables

这是一个应该适用于16列的已编译示例（尚未经过测试，让我知道它是如何工作的）：https://s3.amazonaws.com/intenex/bootstrap16columns.zip

Answer 4

编辑：已经恢复了使用自定义列数创建网格，可以在Bootstrap的customization page上完成。

由于我不知道的原因，最新版本的Bootstrap（3.0.0 / 1）不允许您创建不同于12列的网格，这是一个很大的耻辱。

我们当前可以做的，以及反过来允许创建更多自定义引导程序包的是设置自己的Bootstrap定制程序。

编辑：我刚尝试过。安装所有依赖项非常顺利，同时坚持Docs GitHub页面上的指南。

生成样本 24 column grid

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

Answer 5

16列

960像素

45px * 16 = 720列

15px * 16 = 240 Gutter

1200像素

53px * 16 = 848列

22px * 16 = 352 Gutter

768px

33px * 16 = 528列

15px * 16 = 240 Gutter

Answer 6

2018年更新

重温这个问题以获取最新的Bootstrap 4.现在Bootstrap 4是flexbox，并且包含auto-layout columns，很容易使用任意数量的 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

另见： N number of columns in Bootstrap 4

Answer 7

设置24列：

960
35px柱
5px Gutter

1200
40px柱
10px Gutter

768
29px列
3px Gutter

Answer 8

我发现使用嵌套方法可以快速简便地完成16列...

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

Answer 9

我将Grid 30列用于我的项目（Grid 24和100也可用）

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

根据您的要求，可能需要进行一些自定义

Answer 10

您可以使用以下百分比覆盖width属性：

@Override
public void onOpened()
{
    Toast.makeText(getActivity(),"Slide left",Toast.LENGTH_SHORT).show();
}

@Override
public void onClosed()
{
    Toast.makeText(getActivity(),"Slide right",Toast.LENGTH_SHORT).show();
}

它甚至可以保持响应能力。

如何使用16或24列的bootstrap

10 个答案: