问题:
删除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%，但我希望它们彼此紧挨着。
通常使用.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;
}
Bootstrap 4添加了.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;
}
}
}
如果希望媒体查询支持向上的小型设备，可以删除该查询的最大宽度部分。
仅仅减少列上的填充并不是一个好办法，因为你会延长页面的宽度，使其与页面的其他部分不均匀，比如Navbar。 则需要相等地减小行上的负边距。 以@MartinEdwards的LESS为例:
.row-no-padding {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
