问题描述
问题:
删除Bootstrap 3中col-md- *右侧和左侧的填充/边距。
Remove padding/margin to the right and left of col-md-* in Bootstrap 3.
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>
所需输出:
目前,此代码在两列的右侧和左侧添加了填充/ margin。我想知道为了删除这两边的额外空间,我缺少什么?
Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?
注意:
如果我删除col-md-4,那么这两个列扩展到100%,但我想他们是彼此相邻。
If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other.
推荐答案
您通常会使用封装两列,而不是 .col-md-12
。之后,不具有 col-md-12
带来的额外边距和填充,并且还折扣列将引入负向左&右边距。
You'd normally use .row
to wrap two columns, not .col-md-12
- that's a column encasing another column. Afterall, .row
doesn't have the extra margins and padding that a col-md-12
would bring and also discounts the space that a column would introduce with negative left & right margins.
<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>
如果您真的想要移除填充/边距,以过滤每个子列的边距/填充。
if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
这篇关于在Bootstrap 3中从列中删除填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!