bootstrap柵格系統(tǒng) 修改列數(shù)

這里,我對柵格系統(tǒng)列數(shù)修改提供了兩種方法:

①第一種:全局修改列數(shù):

也就是修改bootstrap的源碼

@grid-columns:12;

@grid-gutter-width:30px;

@grid-float-breakpoint:768px;

②第二種:局部修改列數(shù):

這里以修改成8列為例,

.col-xs-1-8,.col-sm-1-8,.col-md-1-8,.col-lg-1-8{

min-height:1px;

padding-left:15px;

padding-right:15px;

padding:0 0;

position:relative;

}

.col-xs-1-8{

width:12.5%;

float:left;

}

@media(min-width:768px) {

.col-sm-1-8{

width:12.5%;

float:left;

}

}

@media(min-width:992px) {

.col-md-1-8{

width:12.5%;

float:left;

}

}

@media(min-width:1200px) {

.col-lg-1-8{

width:12.5%;

float:left;

}

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Bootstrap是什么? 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,130評論 3 184
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,117評論 0 2
  • 大家好,我是IT修真院成都分院第7期的學(xué)員韓建名,一枚正直純潔善良的WEB前端程序員。 1.背景介紹 Bootst...
    inh_閱讀 859評論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,435評論 0 11
  • 似乎任何輔助睡眠的藥物都已經(jīng)救不了現(xiàn)在的我了,每一個該睡覺的時間都要大把的吃一些抗抑郁焦慮的藥,并且同時走著輔助睡...
    張琬琪_閱讀 274評論 0 0

友情鏈接更多精彩內(nèi)容