在Bootstrap的LESS构建中,有人可以告诉我如何添加第五个设备大小,超大(col-xl-#)?
解决方法
您可以创建其他较少的文件(例如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-columns()mixin而不是.make-grid-xlgcolumns mixin在less / minins / grid-framework.less文件中添加.col-xlg-类前缀。
由于BS 3.2.0,您应该使用自动转换器,以确保您的新编译版本具有与原始编译版本相同的浏览器支持,参见:https://github.com/twbs/bootstrap/issues/13620
要为新代码运行自动修复程序,请在Gruntfile.js中替换引导您的新bootstrapxl.less的bootstrap.less文件引用,并在更改后运行grunt dist。
更新
请注意,上述解决方案仅适用于为较大网格添加列类。请参阅http://stackoverflow.com/a/26963773/1596547添加与默认网格重叠的列或网格。