修复嵌套列上的Bootstrap填充 [英] Fix Bootstrap Padding On Nested Columns

问题描述

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> 
  

请参阅Fiddle 。

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

我目睹的结果是： http://jsfiddle.net/Aeup8/8/

我的第一种方法是设置：

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

但是，这不会修复包装到第二行的列。 p>

请参阅小提琴

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

 （function（$）{
 var $ els = $ '[class ^ =col-'）; 
 //console.log($els）; 
 var cols = {}; 
 $ els.each ）{
 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 [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）; 
  

请参阅Fiddle

但它有问题：

• 我甚至不想修复它，因为它似乎是一个非常糟糕的解决方案（它会

我该怎么办？

解决方案

当嵌套列包裹每个图层时，您可以计算重复的填充它自己的 .row ：

 < 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/ 。

他们目前通过 .com / twbs / bootstrap / blob / v3.1.1 / less / mixins.less＃L646-L651>应用一个否定 margin code> padding ：

  //行
 // 
 //行包含并清除列的浮动。 
 
 .row {
 .make-row（）; 
} 
  

  //为一系列列创建一个包装器
 .make-row（@gutter：@ grid-gutter-width）{
 margin-left：（@gutter / -2）; 
 margin-right：（@gutter / -2）; 
&：extend（.clearfix all）; 
} 
  

Bootstrap 3 applies a 15px left and right padding on columns.

This is causing me trouble because my layout has a lot of nested columns:

<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.

I don't need to just remove the padding because I need the separation between the elements.

The result I'm after, visually, is this: http://jsfiddle.net/Aeup8/8/

My first approach was to set:

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

However, this will not fix columns that wrap onto a second row.

See Fiddle

My second approach was using 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

But it has problems:

• It does not traverse the DOM in the desired order, so it won't do nested ones well.
• I don't even want to fix that because it seems like this is a very bad solution (it would happen every time the viewport size changes)

What do I do?

解决方案

You can counter the duplicated padding when nesting columns by wrapping each layer in its own .row:

<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>

The gap between the 2 primary columns will remain, but the nesting won't continue to indent further: http://jsfiddle.net/5uqmE/.

They currently accomplish this by apply a negative margin that opposes the outer 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);
}

这篇关于修复嵌套列上的Bootstrap填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！