问题:
在 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没有 acol-md-12会带来的额外边距和填充,并且还会折扣列将引入的具有负左右边距的空间。
.row
.col- md-12
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; }