javascript - Distribute Spans Evenly With Bootstrap

Question

I am working with a fluid-responsive bootstrap project. I have four spans; my goal is to show them 4x1, then 2x2, followed by 1x4. I am having trouble doing this without transitioning through 3x1+1.

To show that graphically:

The only code I've found that works is below; in the 4x1 layout, it leaves a wide space between items 2 and 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>

这里的关键是当你嵌套时，你需要打开一个新的 row-fluid div。在您的情况下，如果您只关心两个框，那么您可以只从第一个 row-fluid div 中执行那些 .spans ，甚至不指定全部的 span 类。另外，请记住使每行上的内部跨度类加起来等于总列数

Answer 2

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

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

这不考虑任何填充和边距，但它是一个起点。