twitter-bootstrap – 在行 – 流体中引导多行跨距

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 在行 – 流体中引导多行跨距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
This question非常相似,虽然它没有回答我的问题.

An answer like this会很好,只要它适用于响应式布局,例如.row-fluid,目前还没有.

在Bootstrap中是否有可能在该行中有一个流体行和多行,如下所示:

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

没有第二排跨度有一个奇数边缘左?

Click here for a JSFiddle example

基本上我需要的是在.row-fluid内部有多行跨距而没有第一次破坏布局后的行.

解决方法

那么位移是由左边缘引起的.

这不是理想的,但你总是可以覆盖CSS:

.container-fluid .row-fluid [class*="span"] {
    margin-left:0px;
}

但实际上,错误似乎在于你已经声明了12个span3 DIV,总计达到36个.12是流体容器的限制,所以你需要制作那些span1:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1">1
        </div>
        <div class="span1">2
        </div>
        <div class="span1">3
        </div>
        <div class="span1">4
        </div>
        <div class="span1">5
        </div>
        <div class="span1">6
        </div>
        <div class="span1">7
        </div>
        <div class="span1">8
        </div>
        <div class="span1">9
        </div>
        <div class="span1">10
        </div>
        <div class="span1">11
        </div>
        <div class="span1">12
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            1
        </div>
        <div class="span3">
            2
        </div>
        <div class="span3">
            3
        </div>
        <div class="span3">
            4
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            1
        </div>
        <div class="span3">
            2
        </div>
        <div class="span3">
            3
        </div>
        <div class="span3">
            4
        </div>
    </div>
</div>

看这里:

http://jsfiddle.net/7Lu43/51/

猜你在找的Bootstrap相关文章