bootstrap柵格系統 修改列數

這里,我對柵格系統列數修改提供了兩種方法:

①第一種:全局修改列數:

也就是修改bootstrap的源碼

@grid-columns:12;

@grid-gutter-width:30px;

@grid-float-breakpoint:768px;

②第二種:局部修改列數:

這里以修改成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;

}

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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