从Bootstrap 3中的列中删除填充


本文翻译自：Remove padding from columns in Bootstrap 3

Problem: 问题：

Remove padding/margin to the right and left of col-md-* in Bootstrap 3. 删除Bootstrap 3中col-md- *右侧和左侧的填充/边距。

HTML code: HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

Desired output: 期望的输出：

Currently this code adds padding/margin to the right and left of the two columns. 目前，此代码在两列的右侧和左侧添加填充/边距。 I am wondering what it is I am missing in order to remove this extra space on the sides? 我想知道为了消除两侧的额外空间我错过了什么？

Notice: 注意：

If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other. 如果我删除“col-md-4”，那么两列都会扩展到100％，但我希望它们彼此相邻。

#1楼

参考：https://stackoom.com/question/1K5Ch/从Bootstrap-中的列中删除填充

#2楼

You can create a new class for removing margin and can apply to the element where you want to remove extra margin: 您可以创建一个用于删除边距的新类，并可以应用于要删除额外边距的元素：

1
.margL0 { margin-left:0 !important }

!important : it will help you to remove the default margin or overwrite the current margin value ！important ：它将帮助您删除默认保证金或覆盖当前保证金值

and apply to that div from in which you want to remove the margin from left side 并应用于要从左侧移除边距的div

#3楼

You'd normally use .row to wrap two columns, not .col-md-12 - that's a column encasing another column. 您通常使用.row来包装两列，而不是.col-md-12 - 这是一个包含另一列的列。 Afterall, .row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins. 毕竟， .row没有col-md-12带来的额外边距和填充，并且.row列将带有负左右边距的空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column. 如果您真的想要删除填充/边距，请添加一个类来过滤掉每个子列的边距/填充。

1
2
3
4
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

#4楼

Bootstrap 4 has added .no-gutters class . Bootstrap 4增加了.no-gutters类 。

Bootstrap 3 : I always add this style to my Bootstrap LESS / SASS: Bootstrap 3 ：我总是将这种风格添加到我的Bootstrap LESS / SASS：

1
2
3
4
5
6
.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Then in the HTML you can write: 然后在HTML中你可以写：

1
<div class="row row-no-padding">

If you want to only target the child columns you can use the child selector (Thanks John Wu). 如果您只想定位子列，可以使用子选择器（感谢John Wu）。

1
2
3
4
.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

You may also want to remove padding only for certain device sizes (SASS example): 您可能还想删除某些设备尺寸的填充（SASS示例）：

1
2
3
4
5
6
7
8
9
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

You can remove the max-width part of the media query if you want it to support small devices upwards. 如果您希望它向上支持小型设备，则可以删除媒体查询的最大宽度部分。

#5楼

1
2
3
[class*="col-"]
  padding: 0
  margin: 0

#6楼

Specifically for SASS mixin: 专门针对SASS mixin：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

Then in HTML, you can use 然后在HTML中，您可以使用

1
2
3
4
5
.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

Sure, you can @include only those declarations, which you need. 当然，你只能@include你需要的那些声明。