如何使用Twitter Bootstrap重叠列? [英] How to overlap columns using twitter bootstrap?

问题描述

我想创建一个3列的组合:

I want to create a 3 columns composition:

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

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

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

Col2 must be overlap by col1 and col3 in one column on each side, and they must be in the same row. What is the best way to create this composition using the twitter bootstrap responsive grid?

推荐答案

您有三个选择:

• 使用Twitter引导v1.XX(其网格为16而不是12).然后，您可以对剩下的两个进行任何操作.

以下是带有最新v1.X(即1.4.0)的旧文档: http://bootstrapdocs.com/v1.4.0/docs/

Here the old docs with the latest v1.X (which is 1.4.0): http://bootstrapdocs.com/v1.4.0/docs/

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

As for the v1.4 bootstrap files, https://github.com/twitter/bootstrap/zipball/v1.4.0

• 自定义您的Bootstrap v2.XX版本

您在此处自定义所有内容并进行自定义构建: http://twitter.github.io/bootstrap/customize.html

Here you customize everything and make a custom build: http://twitter.github.io/bootstrap/customize.html

Ps .:如果您使用自定义选项，则可能需要重新执行HTML文件中的所有 span * 组织-即也更改为14(或16)列为边距/填充设置新值.

Ps.:You will probably need to re-do all span* organization in yout HTML file if you use the customization option - that is, change to 14 (or 16) columns, as well as set new values for margin/padding.

(感谢@jmeas指出了自定义功能，忘记了这一点).

• 由于您说过它们可能会重叠，因此可以使用默认版本并使用以下内容.

我所做的就是获取 offset * 类，并简单地创建一个带有负值的 offset-* .

What I did was get the offset* class and simply create a offset-*, with negative value.

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%;
}

请参阅小提琴我添加了一些RGBA颜色，以便您可以看到它们重叠，同时保持"12格".

See Fiddle I added some RGBA colors so you can see they overlap, while keeping the '12 grid'.

这篇关于如何使用Twitter Bootstrap重叠列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！