另一种解决方案(仅在从bootstrap的LESS源编译bootstrap时可行)是重新定义为列设置填充的变量。

你会在变量中找到变量。更少的文件:它被称为@grid-gutter-width。

资料中是这样描述的:

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

将此设置为0，编译引导。更少，并包括生成的bootstrap.css。你完成了。如果您像我一样已经在使用引导源，那么它可以作为定义附加规则的替代方法。

<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <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 row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

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

您可以在col-md-4内的div中添加一个类row，行的-15px边缘将平衡列的沟槽。在Bootstrap 3中关于水槽和排的很好的解释。

通常使用.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;
}

你可以用叉子

https://github.com/srghma/bootstrap-rubygem-without-gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"

只减少列上的填充物不会达到目的，因为你会扩大页面的宽度，使它与页面的其他部分不均匀，比如导航栏。你需要同样地减少行上的负边距。以@martinedwards的LESS为例:

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

将你的列包装成一个.row，并在这个div中添加一个名为no-gutter的类

<div class="container">
  <div class="row no-gutter">
    <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">
            </div>
        </div>
    </div>

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

然后将下面的内容粘贴到您的CSS文件

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}