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宽度的列。