Bootstrap change $ grid-gutter-width

我使用的是Bootstraps網格系統，我需要一個2px每列之間的空格。我試過了列間隙但沒有。

任何人都可以幫忙嗎？

代碼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; 
}

來源

2017-06-20 nattie87

您的DOM結構與bootstrap方式不匹配。每行**必須**有一個「12」欄。 – Hitmands

改變gutter你有兩種方式：

變化@grid-gutter-width在variables.less:327，但隨後你需要編譯生成的CSS自己。
變化@grid-gutter-width和Bootstrap#Customize

注意下載新的自定義生成的定製部分將在twitter bootstrap 4被丟棄。

來源

2017-06-20 12:02:01 Hitmands

嗨，謝謝你的回覆，但我不明白你在說什麼。 – nattie87

Bootstrap具有高度可定製性，您可以更改幾乎所有內容，但需要在較低級別上運行，因爲'bootstrap.css'只是原始文件的結果。如果你不知道如何實現構建管道，可能http://getbootstrap.com/customize/#grid-system更適合你。 – Hitmands

的快速指南調整引導的溝槽寬度

調整大小自舉的天溝

改變自舉的默認排水溝尺寸的簡單方法。

<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; 
    }`

來源

2017-08-27 02:40:11

嘗試添加說明如果可能 –

說明更新 –

Bootstrap change $ grid-gutter-width

回答

相關問題