从Bootstrap 3中的列中删除填充

Question

问题:

删除Bootstrap 3中col-md-*右侧和左侧的填充/边距.

HTML代码:

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

期望的输出:

目前,此代码在两列的右侧和左侧添加填充/边距.我想知道为了消除两侧的额外空间我错过了什么？

注意:

如果我删除"col-md-4",那么两列都会扩展到100%,但我希望它们彼此相邻.

Answer 1

你通常.row用来包装两列,而不是.col-md-12- 这是一个包含另一列的列.毕竟,.row没有额外的边距和填充col-md-12会带来额外的边距和填充,并且还会折叠列将以负左右边距引入的空间.

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

如果您真的想要删除填充/边距,请添加一个类来过滤掉每个子列的边距/填充.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Answer 2

我总是将这种风格添加到我的Bootstrap LESS/SASS:

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

然后在HTML中你可以写:

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

如果您只想定位子列,可以使用子选择器(感谢John Wu).

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

您可能还想删除某些设备尺寸的填充(SASS示例):

/* 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;
    }
  }
}

如果您希望它向上支持小型设备,则可以删除媒体查询的最大宽度部分.

Answer 3

减少列上的填充不会成为诀窍,因为你将扩展页面的宽度,使其与页面的其余部分不一致,比如navbar.您需要同样减少行上的负边距.以@martinedwards'为例:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Answer 4

专门针对SASS mixin:

@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");

然后在HTML中,您可以使用

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

当然,你只能@include你需要的那些声明.

Answer 5

只需在bootstrap 3中添加"no-padding",它就是内置类

Answer 6

此后仅在Bootstrap4上提供

<div class="p-0 m-0">
</div>

注意:.p-0和.m-0已经添加了bootstrap.css

Answer 7

Bootstrap 4有一个本机类来执行此操作:将类添加.no-gutters到父级.row

Answer 8

另一个解决方案,只有从LESS源编译bootstrap时才可行,是重新定义设置列填充的变量.

你会在variables.less文件中找到变量:它被调用@grid-gutter-width.

在消息来源中描述如下:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

将其设置为0,编译bootstrap.less并包含结果bootstrap.css.你完成了.如果您已经使用像我这样的引导源,它可以是定义附加规则的替代方法.

Answer 9

Bootstrap 3，从3.4.0版开始，有一个官方的方法来删除填充： class row-no-gutters。

文档中的示例：

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Answer 10

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

Answer 11

Bootstrap 4具有类.no-gutters，您可以将其添加到row元素。

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

参考：http : //getbootstrap.com/docs/4.0/layout/grid/#grid-options