ブートストラップ列間のスペースを削除するにはどうすればよいですか？

Question

ブートストラップグリッド内の複数の列の間のスペースを削除します。純粋なCSSを使ってこのタスクやその他の優れたソリューションを実現するには、どうすればBootstraps CSSを上書きできますか？あなたがスペースを削除する必要がある場合

main.htmlを

<div class="row"> 
    <div class="col-md-2"> 
    // stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    // stuff here for columns 
    </div> 
</div> 

Answer 1

は、クラスを追加

それを使用

.padding-0{ 
    padding-right:0; 
    padding-left:0; 
} 

HTMLで

このクラスを記述

<div class="row"> 
    <div class="col-md-2 padding-0"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10 padding-0"> 
     //stuff here for columns 
    </div> 
</div> 

Answer 2

あなたは作成することができますrowとremのクラスno-gutterthis postで提案されているように、ブートストラップによって追加されますマージン/パディングOVE：

.row.no-gutter { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
.row.no-gutter [class*='col-']:not(:first-child), 
 
.row.no-gutter [class*='col-']:not(:last-child) { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.row > div { 
 
    background: lightgrey; 
 
    border: 1px solid; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row no-gutter"> 
 
    <div class="col-md-2"> 
 
    1 
 
    </div> 
 
    <div class="col-md-10"> 
 
    2 
 
    </div> 
 
</div>

私は灰色の背景とデモの目的のために境界線を設定しました。結果をフルスクリーンで見ると、列間にスペースがないことがわかります。ブートストラップのあらかじめ定義されたマージンとパディングに関する詳細は、found hereです。私は列にクラスを追加し、子孫ワイルドカードセレクターでカラムの子どもを標的とする

Answer 3

：

HTML：

<div class="row nopadding"> 
    <div class="col-md-2"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10"> 
     //stuff here for columns 
    </div> 
</div> 

CSS：

.nopadding > div[class^="col-"] { 
    padding-right: 0; 
    padding-left: 0; 
} 

Answer 4

の場合LESSを使用している場合、スニペットを使用して行に適用できます。

.no-gutter { 
    [class*="col-"] { 
     padding-left: 0 !important; 
     padding-right: 0 !important; 
    } 
} 

CSSので、同様

.no-gutter > [class*="col-"]{ 
} 

通常の場合：あなたは、彼らが一緒に座る必要があることを削除する場合は、列に

<div class="row no-gutter"> 
    <div class="col-md-2"> 
    //stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    //stuff here for columns 
    </div> 
</div> 

Answer 5

は、両側に15ピクセルのパディングがあります。

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    padding-right: 0px; 
    padding-left: 0px; 
} 

このスニペットは、grid-framework.lessにある変更されたコードのものです。

Answer 6

<div class="row"> 
    <div class="col-md-2" style="padding:0"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10" style="padding:0"> 
     //stuff here for columns 
    </div> 
</div> 

Answer 7

実際にアンシュマンの解決策が働いています！スタイル内でパディングをゼロに設定すると、ブートストラップの列スペースが取り除かれます。パディングは0です。

<div class = "row"> 
    <div class = "col-sm-3" style= "padding:0;"> 
    //html code here.. 
    </div> 
    <div class = "col-sm-3" style= "padding:0;"> 
    //html code here.. 
    </div> 
</div> 

Answer 8

単純加算。ブートストラップ4では

https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

Answer 9

あなたはクラスmx-*とpx-*クラスmx-*とpx-*

<div class="row mx-0"> 
    <div class="col-md-6 px-0"> 
     <p>Your content</p> 
    </div> 
    <div class="col-md-6 px-0"> 
     <p>Your content</p> 
    </div> 
</div> 

を追加することができ、デフォルトのブートストラップスタイルであるので、あなたは手動で

それを追加する必要はありません

Answer 10

ブートストラップ4において、no-guttersクラスが含まれています。余分なCSSは...それは私のために働いた

<div class="row no-gutters"> 
    <div class="col-md-2"> 
    // stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    // stuff here for columns 
    </div> 
</div>