Bootstrap 3 超大 (xl) 列 [英] Bootstrap 3 extra large (xl) columns

问题描述

在 Bootstrap 的 LESS 构建中，谁能告诉我如何添加第五个设备尺寸，超大 (col-xl-#)?

In Bootstrap's LESS build can someone please tell me how to add a fifth device size, extra large (col-xl-#)?

推荐答案

您可以创建另一个 less 文件(例如 bootstrapxl.less)，其中包含以下代码并编译该文件:

You can create a other less file (for instance bootstrapxl.less), containing the following code and compile that file:

@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 混入之外，您还可以修改 less 中的 .make-grid-columns() 混入/minins/grid-framework.less 文件，添加 .col-xlg- 类前缀.

Notice that instead of the .make-grid-xlgcolumns mixin 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.

从 BS 3.2.0 开始，您应该使用 autoprefixer 来确保您的新编译版本与原始编译版本具有相同的浏览器支持，另请参阅:https://github.com/twbs/bootstrap/issues/13620要为新代码运行自动修复程序，请将 bootstrap.less 文件引用替换为 Gruntfile.js 中对新 bootstrapxl.less 的引用，并在更改后运行 grunt dist.

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/13620 To run the autofixer for your new code replace the bootstrap.less file reference with a reference to your new bootstrapxl.less in Gruntfile.js and run grunt dist after your changes.

更新

请注意，上述解决方案仅适用于为更大的网格添加列类时.请参阅https://stackoverflow.com/a/26963773/1596547以添加与默认网格重叠的列或网格.

Please notice that the above solution only works when you add column classes for a larger grid. See https://stackoverflow.com/a/26963773/1596547 to add columns or grids that overlap the default grids.

这篇关于Bootstrap 3 超大 (xl) 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！