从 Bootstrap 3 中的列中删除填充

Question

问题：

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

原文由 kexxcream 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 MackieeE 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 4 添加了 .no-gutters 类。

Bootstrap 3.4 添加了 .row-no-gutters 类

Bootstrap 3 ：我总是将这种样式添加到我的 Bootstrap LESS / SASS 中：

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

然后在 HTML 中你可以这样写：

 <div class="row row-no-padding">

如果你只想定位子列，你可以使用子选择器（感谢 John Wu）。

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

您可能还想删除某些设备尺寸的填充（SASS 示例）：

 /* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

如果您希望它向上支持小型设备，您可以删除媒体查询的最大宽度部分。

原文由 martinedwards 发布，翻译遵循 CC BY-SA 4.0 许可协议