我需要一些帮助，将 bootstrap 2.0.4 设置为 16 或 24 列，而不是默认的 12 列.less 文件并使用 Crunch 重新编译 bootstrap.less 但对于这两个试验我仍然有相同的结果。它仍然是 12 列！当我尝试将 div 设置为 span12 时，它仍然需要整个屏幕吗？
谁能指导我做错了什么，或者如果有人可以生成 16 和 24 列版本并将它们发送给我，那将是完美的
问问题
85098 次
10 回答
18
此方法适用于旧版本的 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
于 2013-03-02T10:06:40.047 回答
15
对于 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>
于 2015-02-20T07:10:53.840 回答
10
足够简单，可以减少 - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization
您需要将那里的变量更改为您想要的 -
例如
@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
于 2012-07-22T00:54:47.533 回答
4
Edit: Creating grids with custom number of columns has been restored, and can be done on Bootstrap's customization page.
For reasons unknown to me, the latest version of Bootstrap (3.0.0/1) doesn't allow you to create grid different than 12 columns, which is a big shame.
What we can do currently, and which will in turn allow for creating more customized bootstrap packages, is to set up your own Bootstrap customizer.
Edit: I just tried it. Installing all the dependencies went quite smooth while sticking to guidelines on their Docs GitHub page.
Sample generated 24 column grid
Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
于 2013-10-22T09:55:01.363 回答
3
16列
960像素
45px *16 =720 列
15px *16 =240 间距
1200像素
53px *16 =848 列
22px *16 =352 间距
768像素
33px *16 =528 列
15px *16 =240 间距
于 2013-06-15T06:59:02.583 回答
1
这是我发现使用嵌套做 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 -->于 2016-07-03T09:13:10.553 回答
1
2018 年更新
为最新的 Bootstrap 4 重新审视这个问题。现在 Bootstrap 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
另请参阅： Bootstrap 4 中的 N 列数
于 2018-03-22T15:53:58.657 回答
1
于 2016-07-09T05:17:47.863 回答
-1
设置 24 列：
960
35px 列
5px 装订线
1200
40px 列
10px 装订线
768
29px 列
3px装订线
于 2013-06-15T21:57:40.260 回答
-1
您可以使用百分比覆盖宽度属性，如下所示：
<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>
它甚至会保持响应能力。
于 2018-02-22T03:14:03.203 回答