ブートストラップ変更$ grid-gutter-width

Question

私はブートストラップグリッドシステムを使用しており、各カラムの間に2pxスペースが必要です。私はColumn-Gapを試しましたが、何もしませんでした。

助けてもらえますか？

コードHTML：

<div class="container"> 
<div class="row"> 
<div class="col-md-3" id="one"> 
<h3>Pink</h3> 

</div> 
<div class="col-md-3" id="two"> 
<h3>Purple</h3> 
</div> 
<div class="col-md-3" id="three"> 
<h3>Green</h3> 
</div> 
<div class="col-md-3" id="four"> 
<h3>Orange</h3> 
</div> 
</div> 
<div class="row2"> 
<div class="col-md-3" > 
<h3>Things that are Pink</h3> 
<p>Pigs</p> 
<p>Barbie</p> 
<p>Some Skins</p> 
<p>Ham</p> 
</div> 
<div class="col-md-3" > 
<h3>Things that are Purple</h3> 
<p>Prince</p> 
<p>Goths</p> 
<p>Paint</p> 
<p>Berries</p> 
</div> 
<div class="col-md-3" > 
<h3>Things that are Green</h3> 
<p>Grass</p> 
<p>Peas</p> 
<p>Leafs</p> 
<p>Apple</p> 
</div> 
<div class="col-md-3" > 
<h3>Things that are Orange</h3> 
<p>Orange</p> 
<p>Ice-Lolly</p> 
<p>Essex</p> 
<p>Carrots</p> 
</div> 
</div> 
</div> 
</body> 
</html> 

コード：CSS

body { 
font-family: 'Roboto Mono', monospace; 

} 

@media screen and (min-width: 768px) 
.jumbotron { 
padding-top: 48px; 
padding-bottom: 48px; 
} 

.jumbotron { 
text-align: center; 
} 

.container { 
text-align: center; 
} 

#one { 
border: 5px solid pink; 
border-radius: 20px; 
background-color: pink; 
color: white; 
} 

#two { 
border: 5px solid purple; 
border-radius: 20px; 
background-color: purple; 
color: white; 
} 

#three { 
border: 5px solid green; 
border-radius: 20px; 
background-color: green; 
color: white; 
} 

#four { 
border: 5px solid orange; 
border-radius: 20px; 
background-color: orange; 
color: white; 
} 

.row2 { 
margin-top: 30px; 
margin-right: -15px; 
margin-left: -15px; 
} 

Answer 1

変更するgutter次の2つの方法があります：variables.less:327で

1. 変更@grid-gutter-widthを、しかし、あなたがする必要があります。生成されたCSSをあなた自身でコンパイルしてください。
2. 変更@grid-gutter-widthとカスタマイズセクションはtwitter bootstrap 4にドロップされることをBootstrap#Customize

ノートで新しいカスタムビルドをダウンロードしてください。

Answer 2

ブートストラップのガター幅

リサイズブートストラップのガター

ブートストラップのデフォルトのガターサイズを変更する簡単な方法をリサイズへのクイックガイド。

<div class="gutter-2 row"> 
<div class="col-md-6"></div> 
<div class="col-md-6"></div>`</div>` 
.gutter-2.row { 
    margin-right: -1px; 
    margin-left: -1px; 
    } 
    .gutter-2 > [class^="col-"], .gutter-2 > [class^=" col-"] { 
    padding-right: 1px; 
    padding-left: 1px; 
    }`