问题:

在引导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%,但我希望它们彼此相邻。


当前回答

我想直接用更简单

margin:-30px;

重写通过引导设置的原始值。

我试过了

margin: 0px -30px 0px -30px;

这对我很有效。

其他回答

我仍然喜欢控制每个屏幕大小的每个填充,所以这个css可能对你们有用:)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}

此后仅可在Bootstrap 4

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

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

另一种解决方案(仅在从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。你完成了。如果您像我一样已经在使用引导源,那么它可以作为定义附加规则的替代方法。

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

你可以创建一个新的类来删除边距,并应用于你想要删除额外边距的元素:

.margL0 { margin-left:0 !important }

重要:它将帮助您删除默认的保证金或覆盖当前的保证金值

并应用于您想要从左侧删除边缘的div