2

我想创建一个 3 列组合：

col1 (span 3) - col2 (span 8) - col3 (span 3)

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

4

1 回答 1

0

你有三个选择：

  • 使用 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.：如果您使用自定义选项，您可能需要重新执行span*HTML 文件中的所有组织 - 即更改为 14（或 16）列，并为边距/填充设置新值。

（感谢@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%;
}

请参阅 Fiddle 我添加了一些 RGBA 颜色，以便您可以看到它们重叠，同时保持“12 网格”。

于 2013-05-20T17:20:35.233 回答