问题:
删除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; }