twitter-bootstrap Bootstrap 3 超大 (xl) 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23256977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 extra large (xl) columns
提问by dubloons
In Bootstrap's LESS build can someone please tell me how to add a fifth device size, extra large (col-xl-#)?
在 Bootstrap 的 LESS 构建中，有人可以告诉我如何添加第五个设备尺寸，超大 ( col-xl-#)？
采纳答案by Bass Jobsen
You can create a other less file (for instance bootstrapxl.less), containing the following code and compile that file:
您可以创建另一个 less 文件（例如 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));
}
}
Notice that instead of the .make-grid-xlgcolumnsmixin in the above code you could also modify the .make-grid-columns()mixin in the less/minins/grid-framework.less file by adding the .col-xlg-class prefix.
请注意，.make-grid-xlgcolumns除了上述代码中的mixin，您还可以.make-grid-columns()通过添加.col-xlg-类前缀来修改less/minins/grid-framework.less 文件中的mixin 。
Since BS 3.2.0 you should use the autoprefixer to make sure that your new compiled version has the same browser support as the original compiled version, see also: https://github.com/twbs/bootstrap/issues/13620To run the autofixer for your new code replace the bootstrap.lessfile reference with a reference to your new bootstrapxl.less in Gruntfile.js and run grunt distafter your changes.
从 BS 3.2.0 开始，您应该使用 autoprefixer 来确保您的新编译版本与原始编译版本具有相同的浏览器支持，另请参见：https: //github.com/twbs/bootstrap/issues/13620运行新代码的自动修复程序将bootstrap.less文件引用替换为 Gruntfile.js 中对新 bootstrapxl.less 的引用，并grunt dist在更改后运行。
update
更新
Please notice that the above solution only works when you add column classes for a larger grid. See https://stackoverflow.com/a/26963773/1596547to add columns or grids that overlap the default grids.
请注意，上述解决方案仅在您为更大的网格添加列类时才有效。请参阅https://stackoverflow.com/a/26963773/1596547添加与默认网格重叠的列或网格。
回答by Marc van Nieuwenhuijzen
You can download a simple small CSS file from GitHub using this link: https://github.com/marcvannieuwenhuijzen/BootstrapXL
您可以使用以下链接从 GitHub 下载一个简单的小 CSS 文件：https: //github.com/marcvannieuwenhuijzen/BootstrapXL
If you add this CSS file to the HTML after the Bootstrap CSS file you will be able to use col-xl-{size}, col-xl-push, hidden-xl, etc. The media-query breakpoint is 1600px;
如果添加此CSS文件到引导CSS文件后，HTML，你将能够使用col-xl-{size}，col-xl-push，hidden-xl等媒体查询断点1600px;
UpdateThe alpha release for Bootstrap 4 is available now with native support for extra large screens. http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/but it's breakpoint for extra large is still 1200px.
更新Bootstrap 4 的 alpha 版本现已推出，原生支持超大屏幕。 http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/但它的超大断点仍然是 1200px。
Update 2 (july 2017)Stop using bootstrap and start using standard CSS grids, TODAY. You can find an introduction here.
更新 2（2017 年 7 月）今天停止使用引导程序并开始使用标准 CSS 网格。您可以在此处找到介绍。
回答by Harry
Twitter Bootstrap has listened You #V4 Support for Extra Large Devices Now --> http://v4-alpha.getbootstrap.com/layout/grid/#grid-options
Twitter Bootstrap 已经倾听您的意见 #V4 现在支持超大设备 --> http://v4-alpha.getbootstrap.com/layout/grid/#grid-options
回答by Sam Henderson
https://github.com/shenders13/bootstrap-grid-100cols-with-xl-and-xxl
https://github.com/shenders13/bootstrap-grid-100cols-with-xl-and-xxl
A CSS file that contains the bootstrap grid with additional xlg ( > 1500px width ) and xxlg ( > 2000 px width) classes. The grid is split into columns with 1/100 width of the parent div.
一个 CSS 文件，其中包含带有额外 xlg（> 1500 像素宽度）和 xxlg（> 2000 像素宽度）类的引导网格。网格被分成父 div 的 1/100 宽度的列。
