在行流体中引导多行跨度

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

在 bootstrap 3 中，可以在同一行中插入多个 (.span)。我发现最有趣的是，不会破坏布局并且可以提高响应能力。在引导程序 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;
      }
    }
  }
}

Answer 2

好吧，位移是由margin-left引起的。

这并不理想，但您始终可以覆盖 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/