Question

在Bootstrap的LESS版本中，有人可以告诉我如何添加第五个设备尺寸，超大（col-xl-#）？

Answer 1

您可以使用以下链接从GitHub下载一个简单的小CSS文件： https://github.com/marcvannieuwenhuijzen/BootstrapXL

如果您在Bootstrap CSS文件之后将此CSS文件添加到HTML，则可以使用col-xl-{size}，col-xl-push，hidden-xl等。媒体查询断点为{ {1}}

<强>更新 Bootstrap 4的alpha版本现已上市，支持超大屏幕。 http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/但是超大的断点仍然是1200px。

更新2（2017年7月） 停止使用bootstrap并开始使用标准的CSS网格，TODAY。您可以找到简介here。

Answer 2

您可以创建另一个较少的文件（例如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 mixin，您还可以通过添加.make-grid-columns()类来修改less / minins / grid-framework.less文件中的.col-xlg- mixin。前缀。

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

<强>更新

请注意，上述解决方案仅在为较大网格添加列类时才有效。请参阅https://stackoverflow.com/a/26963773/1596547以添加与默认网格重叠的列或网格。

Answer 3

Twitter Bootstrap听了你＃V4 现在支持超大型设备 - ＆gt; http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Answer 4

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

一个CSS文件，其中包含带有附加xlg（> 1500px宽度）和xxlg（＆gt; 2000 px宽度）类的引导网格。网格被分成具有父div的1/100宽度的列。

Bootstrap 3个超大（xl）列

4 个答案: