使用Bootstrap均匀分配Spans

Question

我正在使用流体响应式引导项目。我有四个跨度;我的目标是向他们展示4x1，然后是2x2，然后是1x4。我没有通过3x1 + 1过渡而无法做到这一点。

以图形方式显示：

我发现的唯一代码是下面的代码;在4x1布局中，它在第2和第3项之间留下了宽阔的空间。

<div class="container-fluid">
    <div class="span11">
        <div class="span5">
            <h2>Item 1</h2>
        </div>
        <div class="span5">
            <h2>Item 2</h2>
        </div>
    </div>
    <div class="span11">
        <div class="span5">
            <h2>Item 3</h2>
        </div>
        <div class="span5">
            <h2>Item 4</h2>
        </div>
    </div>
</div>

Answer 1

默认的引导网格是12列。你定制了吗？如果是这样，请共享该代码。即使您进行了自定义并使用了11列网格（顺便说一下这似乎是一个坏主意），您只使用跨度在11列容器内添加10个。

在引导程序的流体网格中，这是嵌套跨度的正确方法：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span6"></div>
                <div class="span6"></div>
            </div>
        </div>
    </div>
</div>

这里的关键是当你筑巢时，你需要打开一个新的行 - 流体div。在你的情况下，如果你只关心这两个盒子，那么你可以从第一行 - 流体div中做那些.spans，甚至不指定全量的span类。另外，请记住让每行上的内部span类加起来总列数

Answer 2

我只想为此创建自定义网格大小。如果您熟悉LESS，则可以编辑grid.less文件或添加如下内容：

.col-quarter {
  width: 25%;
  float: left;
}
.col-half {
 width: 50%;
 float:left;
}
.col-third {
 width: 33%;
 float:left;
}

这并不代表任何填充和边距，但它是一个起点。