Bootstrap 3超大（xl）列

Question

在Bootstrap的LESS內建可以有人請告訴我如何添加第五個設備大小，特大（col-xl-#）？

Answer 1

您可以創建其他不太文件（例如bootstrapxl.less），包含下面的代碼和編譯文件：

@import "bootstrap.less"; 

// XLarge screen 
@screen-xlg:     1600px; 
@screen-xlg-min:    @screen-xlg; 
@screen-xlg-hughdesktop:  @screen-xlg-min; 

// So media queries don't overlap when required, provide a maximum 
@screen-lg-max:    (@screen-xlg-min - 1); 

//== Container sizes 
// Large screen/wide desktop 
@container-xlarge-desktop:  ((1540px + @grid-gutter-width)); 
@container-xlg:     @container-xlarge-desktop; 

// Container widths 
// 
// Set the container width, and override it for fixed navbars in media queries. 

.container { 
    @media (min-width: @screen-xlg-min) { 
    width: @container-xlg; 
    } 
} 

.make-grid-xlgcolumns() { 
    // Common styles for all sizes of grid columns, widths 1-12 
    .col(@index) when (@index = 1) { // initial 
    @item: ~".col-xlg-@{index}"; 
    .col((@index + 1), @item); 
    } 
    .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo 
    @item: ~".col-xlg-@{index}"; 
    .col((@index + 1), ~"@{list}, @{item}"); 
    } 
    .col(@index, @list) when (@index > @grid-columns) { // terminal 
    @{list} { 
     position: relative; 
     // Prevent columns from collapsing when empty 
     min-height: 1px; 
     // Inner gutter via padding 
     padding-left: (@grid-gutter-width/2); 
     padding-right: (@grid-gutter-width/2); 
    } 
    } 
    .col(1); // kickstart it 
} 
.make-grid-xlgcolumns(); 
.make-grid(xlg); 

// Generate the large columns 
.make-xlg-column(@columns; @gutter: @grid-gutter-width) { 
    position: relative; 
    min-height: 1px; 
    padding-left: (@gutter/2); 
    padding-right: (@gutter/2); 

    @media (min-width: @screen-xlg-min) { 
    float: left; 
    width: percentage((@columns/@grid-columns)); 
    } 
} 
.make-xlg-column-offset(@columns) { 
    @media (min-width: @screen-xlg-min) { 
    margin-left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-xlg-column-push(@columns) { 
    @media (min-width: @screen-xlg-min) { 
    left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-xlg-column-pull(@columns) { 
    @media (min-width: @screen-xlg-min) { 
    right: percentage((@columns/@grid-columns)); 
    } 
} 

注意，而不是在上面的代碼.make-grid-xlgcolumns混入你還可以修改.make-grid-columns()通過添加.col-xlg-類前綴將mixin放入less/minins/grid-framework.less文件中。

由於BS 3.2.0你應該使用autoprefixer，以確保你的新編譯版本具有相同的瀏覽器支持，原編譯的版本，另見：https://github.com/twbs/bootstrap/issues/13620 要爲您的新代碼運行autofixer更換bootstrap.less文件在Gruntfile.js中引用新的bootstrapxl.less，並在更改後運行grunt dist。

更新

請注意，當你添加列類較大的電網上述解決方案僅適用。請參閱https://stackoverflow.com/a/26963773/1596547以添加與默認網格重疊的列或網格。

Answer 2

您可以從GitHub使用這個鏈接下載一個簡單的小CSS文件： https://github.com/marcvannieuwenhuijzen/BootstrapXL

如果您在引導CSS後添加此CSS文件，HTML文件，你將能夠使用col-xl-{size}，col-xl-push，hidden-xl，等媒體查詢斷點1600px;

更新 的alpha版本的引導4是額外的大屏幕原生支持現已推出。 http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/但它的特大斷點仍然是1200px。

更新2（2017年7月） 停止使用引導並開始使用標準CSS網格，今天。你可以找到一個簡介here。

Answer 3

Twitter的引導聽了你＃V4 支持特大型設備現在 - >http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Answer 4

https://github.com/shenders13/bootstrap-grid-100cols-with-xl-and-xxl

包含額外XLG引導格（> 1500px寬度）和xxlg（CSS文件> 2000像素寬度）類。網格被分割成父div的1/100寬度的列。