Question

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内有多行跨距而没有第一次破坏布局后的行。

Answer 1

位移是由左边距引起的。

这不太理想，但你总是可以覆盖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/

Answer 2

在bootstrap 3中，可以在同一行中插入多个（.span）。我发现最有趣的是，不会破坏布局并且能够响应。在bootstrap 2中，你必须遵守每行12列的石灰。如果超出此限制，则其他列中包含的边距会妨碍布局。

对于我的情况，我清理了列边距并仅为右列插入了边距：

例子 - 布局2列

.myDiv{
  .span6{
    margin-left:0;
    &:nth-child(even){
      margin-left: 2.127659574468085%;
    }
  }
}

和响应式767px

@media  (max-width: 767px) {
  .myDiv{
    .span6{
      margin-left:0;
      &:nth-child(even){
        margin-left: 0;
      }
    }
  }
}

在行 - 流体中引导多行跨距

2 个答案: