請,先在第一列中的附加圖像引導山口寬
一看我想20%
,但是當我用col-md-2
,其設置width: 16.6667%
我如何使用引導程序集列20%
。 我是否需要製作自己的CSS或有自定義bootstraps3的方法
請,先在第一列中的附加圖像引導山口寬
一看我想20%
,但是當我用col-md-2
,其設置width: 16.6667%
我如何使用引導程序集列20%
。 我是否需要製作自己的CSS或有自定義bootstraps3的方法
Bootstrap網格系統基於12列。 這裏還有就是引導官方文檔http://getbootstrap.com/css/#grid
COL-MD-2意味着你要分配的容器的總寬度的2/12,因此16.6667%
如果你想分配20 %,你可以在col-md-2附近添加一個類並重寫寬度,或者設置一個內嵌樣式。 請注意,如果您設置20%不是12的倍數,那麼只使用引導程序,近列不會拉伸到100%的寬度。
您必須使用自定義類(簡單方法)或自定義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
類。
你想要多少列? –
[How to Customize Bootstrap Column Widths?]可能出現重複(http://stackoverflow.com/questions/28750907/how-to-customize-bootstrap-column-widths) –
一列爲10%,第二列爲20% –