从引导3中的列中删除填充

问题:

在引导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 3的内置类

2016-08-19 11:57:56

其他回答

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

.margL0 { margin-left:0 !important }

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

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

2013-10-24 10:13:57

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

2016-12-26 15:03:30

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

2013-10-24 10:32:51

此后仅可在Bootstrap 4

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

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

2017-01-15 14:28:05

我想直接用更简单

margin:-30px;

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

我试过了

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

这对我很有效。

2015-12-15 07:14:38

从引导3中的列中删除填充

推荐文章

最新文章

标签