3

这个问题非常相似，尽管它没有回答我的问题。

像这样的答案会很好，只要它适用于响应式布局，例如.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>

没有第二行跨度有一个奇数的左边距？

单击此处查看 JSFiddle 示例

本质上，我需要的是在 a 内有多行跨度，.row-fluid而在第一次破坏布局后没有行。

4

2 回答 2

6

那么位移是由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/

于 2013-04-19T12:39:59.473 回答
1

在引导程序 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;
      }
    }
  }
}
于 2017-04-17T15:01:37.893 回答