问题:

在引导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创建更少的Mixins来管理你的列的边距和填充,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

用法:

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

类似地,设置边距/填充为0,你可以使用,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

其他回答

你可以使用bootstrap创建更少的Mixins来管理你的列的边距和填充,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

用法:

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

类似地,设置边距/填充为0,你可以使用,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

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

自3.4.0版本起,引导3有了一种删除填充的正式方式:类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>
[class*="col-"]
  padding: 0
  margin: 0

你可以用叉子

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

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