问题:

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


当前回答

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/ #网格选项

其他回答

如果你下载了带有SASS文件的bootstrap,你将能够编辑配置文件,其中设置了列的边距,然后保存它,这样SASS就会计算出列的新宽度

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

.margL0 { margin-left:0 !important }

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

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

Bootstrap 4有一个原生类来做这件事:将类.no-gutters添加到父类.row

以上的解决方案都不适合我。根据这个答案,我能够创造一些适合我的东西。在这里,我还使用了一个媒体查询,以限制这只小屏幕。

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}

您可以自定义引导网格系统并定义自定义响应网格。

将以下沟槽宽度的默认值从@grid-gutter-width = 30px更改为@grid-gutter-width = 0px

(沟槽宽度是列之间的填充物。它被分成了左右两半。)