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

发布时间：2020-12-17 21:20:04 所属栏目：安全来源：网络整理

导读：This question非常相似,虽然它没有回答我的问题. An answer like this会很好,只要它适用于响应式布局,例如.row-fluid,目前还没有. 在Bootstrap中是否有可能在该行中有一个流体行和多行,如下所示： div class="container-fluid" div class="row-fluid" div cl

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!