一種使Bootstrap col-xx在列之間不填充的方法

在Bootstrap col-xx類中定義的padding有時會在小屏幕上浪費空間，所以我想通過將col-xx與某些css嵌套來刪除填充像這樣的設置：一種使Bootstrap col-xx在列之間不填充的方法

<style> 
div[class^=col-] > div[class^=col-] { 
    padding-left: 0px; 
    padding-right: 0px; 
} 
</style> 

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="col-xs-4">a</div> 
     <div class="col-xs-4">b</div> 
     <div class="col-xs-4">c</div> 
    </div> 
</div>

我的實現看起來好嗎？直接嵌套col-xx是否存在任何潛在的樣式問題？

來源

2016-09-05 ineztia

相關：http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 – Roberrrt

你還應該包括'margin：0'。你可以像'padding：0'一樣縮短填充 –

應該沒有問題，但我不會在整個col-X上聲明0填充，而是創建一個自定義無填充類，並將0填充應用於該類。

<style> 
.no-padding{ 
    padding-left: 0px; 
    padding-right: 0px; 
} 
</style> 

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="col-xs-4 no-padding">a</div> 
     <div class="col-xs-4 no-padding">b</div> 
     <div class="col-xs-4 no-padding">c</div> 
    </div> 
</div>

它是一個好主意，不能修改自舉核心元素的風格，因爲它可能會產生混淆其他人相同的代碼工作。

來源

2016-09-05 12:12:55

一種使Bootstrap col-xx在列之間不填充的方法

回答

相關問題