引導山口寬

Question

請，先在第一列中的附加圖像

一看我想20%，但是當我用col-md-2，其設置width: 16.6667% 我如何使用引導程序集列20%。 我是否需要製作自己的CSS或有自定義bootstraps3的方法

Answer 1

Bootstrap網格系統基於12列。 這裏還有就是引導官方文檔http://getbootstrap.com/css/#grid

COL-MD-2意味着你要分配的容器的總寬度的2/12，因此16.6667％

如果你想分配20 ％，你可以在col-md-2附近添加一個類並重寫寬度，或者設置一個內嵌樣式。 請注意，如果您設置20％不是12的倍數，那麼只使用引導程序，近列不會拉伸到100％的寬度。

Answer 2

您必須使用自定義類（簡單方法）或自定義Bootstrap網格系統。

爲了創建你可以使用類似的自定義類：

.col-10p { 
    width: 100%; 
} 

.col-20p { 
    width: 100%; 
} 
@media screen and (min-width: 768px) { 

.col-10p { 
    width: 10%; 
    float: left; 
} 

.col-20p { 
    width: 20%; 
    float: left; 
} 
} 

然後，你將獲得分別10％和20個％的寬度集裝箱，將響應像COL-MD-* S。這些可以像col - * - *類一樣使用。

如果你customize引導或覆蓋默認的網格類，它會影響整個項目，並會產生意想不到的結果。

這樣你就可以覆蓋類：

.col-md-2 { 
    width: 10% !important; 
} 

由於使用!important不做事的好方法：你可以使用像另一種方法：

.width-10.col-md-2 { 
    width: 10%; 
} 

，這將給你想要的效果。只需在HTML中使用width-10類。