Question

我想创建一个3列组合：

col1（span 3） - col2（span 8） - col3（span 3）

Col2必须在每侧的一列中以col1和col3重叠，并且它们必须在同一行中。使用twitter bootstrap响应网格创建此合成的最佳方法是什么？

Answer 1

您有三种选择：

使用Twitter Bootstrap v1.XX，其中网格为16而不是12。然后，您可以使用剩下的两个来做任何您喜欢的事情。

这里的旧文档包含最新的v1.X（1.4.0）：http://bootstrapdocs.com/v1.4.0/docs/

对于v1.4引导文件，https://github.com/twitter/bootstrap/zipball/v1.4.0

自定义您的Bootstrap v2.XX版本

在这里，您可以自定义所有内容并进行自定义构建：http://twitter.github.io/bootstrap/customize.html

Ps.:如果您使用自定义选项（即更改为14（或16）列，以及设置新值），您可能需要重新执行HTML文件中的所有span*组织保证金/填补。

（感谢@jmeas指出定制，忘记了这一点。）

由于您说他们可以重叠，您可以使用默认构建并使用以下内容。

我所做的是获取offset*课程，只需创建一个负值的offset-*。

HTML：

<div class="container">
    <div class="row-fluid">
        <div class="span3">xx</div>
        <div class="span8 offset-1">yy</div>
        <div class="span3 offset-1">zz</div>
    </div>
</div>

CSS：

.row-fluid .offset-1 {
    margin-left: -10.638297872340425%;
    *margin-left: -10.53191489361702%;
}
.row-fluid .offset-1:first-child {
    margin-left: -8.51063829787234%;
    *margin-left: -8.404255319148938%;
}

See Fiddle 我添加了一些RGBA颜色，因此您可以看到它们重叠，同时保持'12网格'。

如何使用twitter bootstrap重叠列？

1 个答案: