修复嵌套列上的引导填充答案

【问题标题】：Fix Bootstrap Padding On Nested Columns修复嵌套列上的引导填充
【发布时间】：2014-05-10 00:44:00
【问题描述】：

Bootstrap 3 在列上应用 15px 左右填充。

这给我带来了麻烦，因为我的布局有很多嵌套列：

<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12">
    <div class="col-md-6">
        <div class="col-md-12"></div>
        <div class="col-md-12"></div>
    </div>
    <div class="col-md-6"></div>
</div>

See Fiddle.

我不需要只删除填充，因为我需要元素之间的分隔。

我所追求的结果在视觉上是这样的：http://jsfiddle.net/Aeup8/8/

我的第一个方法是设置：

[class^='col-'] {
    padding:0;
}
[class^='col-'] + [class^='col-'] {
    padding-left: 15px;
}

但是，这不会修复换行到第二行的列。

See Fiddle

我的第二种方法是使用 JavaScript：

(function($) {
    var $els = $('[class^="col-"');
    //console.log($els);
    var cols = {};
    $els.each(function(i, col) {
        var classes = $(col).attr('class').split(' ');

        classes.forEach(function(str) {
            var match = str.match(/col-(\w+)-(\d+)/);
            if ( match ) {
                //console.log($els.eq(i));
                cols[match[1]] = cols[match[1]] || {};
                var current = cols[match[1]];

                if ( match[2] == 12 ) {
                    current.ids = [];
                    current.sum = 0;

                    $els.eq(i).css({ padding: 0 });
                    return
                }

                current.ids = current.ids || [];
                current.sum = current.sum || 0;
                current.sum += ( +match[2] );
                current.ids.push(i);
                if (current.sum == 12) {
                    //console.log(current);
                    current.ids.forEach(function(id) {
                        $els.eq(id).css({ 'padding': 0, 'padding-right': '15px' });
                        if (id == i) $els.eq(id).css({ 'padding': 0, 'padding-left': '15px' });
                    });
                    current.ids = [];
                    current.sum = 0;
                }
            }
        });
    });
})(jQuery);

See Fiddle

但它有问题：

它不会以所需的顺序遍历 DOM，因此它不能很好地完成嵌套。
我什至不想解决这个问题，因为这似乎是一个非常糟糕的解决方案（每次视口大小发生变化时都会发生这种情况）

我该怎么办？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

您可以通过将每一层包装在自己的.row 中来对抗nesting columns 时的重复填充：

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12"></div>
                    <div class="col-md-12"></div>
                </div>
            </div>
            <div class="col-md-6"></div>
        </div>
    </div>
</div>

两个主列之间的间隙将保留，但嵌套不会继续进一步缩进：http://jsfiddle.net/5uqmE/。

They currently accomplish this by apply a negative margin 反对外部padding：

// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}

【讨论】：

我知道这一点，但是，这实际上是由 WP 小部件生成的一个非常复杂的布局，它会在不同的屏幕尺寸上改变位置，而做出这种改变实际上非常困难。必须有一种方法可以在不使用 .row 包装器的情况下做到这一点！但无论如何，感谢您的回答。
@Alain Jacomet Forte 如果这是一个复杂的布局，你为什么首先使用 Bootstrap？您的代码的维护者将依赖 Bootrstap 布局，而不是覆盖自定义网格。覆盖框架的行为是一种不好的做法。

【解决方案2】：

在你的容器上

.row  .row {
    margin: 0px -15px;
}

【讨论】：

【解决方案3】：

一个简单的基于 css 的解决方案可以创建自定义类并将它们应用到 col-* 以清除内部 div 上的填充或您不想要填充的位置。

<div class="col-md-6 mmLR15"></div>
<div class="col-md-6 mM15"></div>
<div class="col-md-12 mM15">
    <div class="row">
      <div class="col-md-6 mmR15">
        <div class="col-md-12 mm15"></div>
        <div class="col-md-12 mm15"></div>
      </div><!-- col-md-6 -->
      <div class="col-md-6 mmL15"></div>
    </div><!-- row -->
</div><!-- col-md-12 -->

现在对于 mmLR15、mmR15、mmL15 将在需要时清除引导列填充。下面写了类声明，以帮助您清楚地理解我的观点。

.mmLR15 {
  margin: 0px -15px;
}
.mmR15 {
  margin-right: -15px;
}
.mmL15 {
  margin-left: -15px;
}

这只会清除您不想要的 div 上的引导类。必须在需要的地方包括课程。您可以创建一个单独的文件并在引导后包含，这样您的代码就更干净了。 mmR15 和 mmL15 仅适用于行中的 div，因为行清除了左右边距。

对于引导程序使列 100% 的媒体断点，您可以根据您的需要或我应该根据您的布局来重置它们。希望对您有所帮助。

【讨论】：