問題:
col-md-*
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>
望ましい出力:
現在、このコードは 2 つの列の右側と左側にパディング/マージンを追加します。両側の余分なスペースを削除するには、何が足りないのでしょうか?
知らせ:
削除するcol-md-4
と、両方の列が 100% に拡大されますが、それらを隣り合わせに配置する必要があります。
ベストアンサー1
通常は.row
2つの列を折り返すのではなく、.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;
}