[解決済み] 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;
}
関連
-
[解決済み] font: inheritを使用する目的は何ですか?
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] psuedo 要素を用いたスクロール/ホバー可能な CSS ツールチップ
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】サイドバーの位置を変更する
-
[解決済み】div間の空白を削除する
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] CSSでボーダーの不透明度を設定することはできますか?
-
[解決済み] グレーの透明な背景を設定する
-
[解決済み] ブラウザでCSSファイルが更新されない
-
[解決済み] Bootstrap 3でnavbar-static-topは何をするのですか?
-
[解決済み] 位置固定が効かないのが絶対のように効いている【非公開
-
[解決済み] div要素内でテキストが折り返されない