1. ホーム
  2. css

[解決済み] Bootstrap 3 で列からパディングを削除する

2022-02-19 19:25:32

質問

問題あり。

Bootstrap 3 で col-md-* の右と左にある padding/margin を削除してください。

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%に拡張されますが、私はそれらを互いに隣接させたいと思います。

どうすればいいですか?

通常 .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;
}