Bootstrap 3 额外大 (xl) 列

Question

在Bootstrap的LESS构建中，有人可以告诉我如何添加第五个设备尺寸——extra large（col-xl-#）吗？

- dubloons

---

我们正在努力对其进行适当的文档编写：https://github.com/twbs/bootstrap/issues/13046 - cvrebert

Answer 1

您可以使用以下链接从GitHub下载简单的小型CSS文件： https://github.com/marcvannieuwenhuijzen/BootstrapXL 如果您将此CSS文件添加到Bootstrap CSS文件后面的HTML中，您将能够使用 col-xl-{size}, col-xl-push, hidden-xl 等。媒体查询断点是1600px; 更新：Bootstrap 4的Alpha版现已发布，具有本地支持超大屏幕的功能。 http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/，但它的超大屏幕的断点仍为1200px。

更新2（2017年7月）：停止使用Bootstrap，开始使用标准CSS网格布局，今天就可以开始使用。您可以在此处找到一个介绍： https://www.youtube.com/watch?v=7kVeCqQCxlk。

- Marc van Nieuwenhuijzen

---

刚刚更新了文件，因为缺失的CSS条目导致“visible-xl”与其他“visible”类别的功能不同。 - Marc van Nieuwenhuijzen

太棒了！如果你只需要 .xl 功能，这个工具非常好用！另外请注意，Bootstrap 4 即将发布，其中包括 .xl 类作为默认选项。http://v4-alpha.getbootstrap.com/layout/grid/#grid-options - Edward

在v4中，.xl列替换了v3中的.lg列，因此它并不是为更宽的屏幕而设计的。两者都适用于视口> 1200像素。（我在alpha阶段的文档中读到了这一点。可能会有所改变。） - bovender

这太棒了。你应该提醒大家，在引入Bootstrap以及任何Bootstrap主题之后，都应该链接它。我花了2分钟才找到这个问题，但是一些经验不足的人可能会错过它。 - DanteTheSmith

谢谢@MarcvanNieuwenhuijzen，那个CSS网格视频很棒。我鼓励所有来到这个页面的人都去看一下！ - hackel

Answer 2

您可以创建另一个 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));
  }
}

请注意，上述代码中的.make-grid-xlgcolumns mixin可以改为在less/minins/grid-framework.less文件中修改.make-grid-columns() mixin，并添加.col-xlg-类前缀。

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

更新

请注意，上述解决方案仅适用于添加大网格的列类。请参见https://dev59.com/d2Af5IYBdhLWcg3w_W9j#26963773以添加重叠默认网格的列或网格。

- Bass Jobsen

---

谢谢您的信任。稍有修正，.make-grid(xlg);需要放在@screen-xlg-min的媒体查询中。@media (min-width: @screen-xlg-min) { .make-grid(xlg); } - kspearrin

非常有帮助的答案，我已经将其转换为适用于bootstrap-sass的格式。 - Tom

Hugh Desktop 怎么了？我没看到那个变量被使用了。 - user1499731

它等于@screen-xlg-min，并非所有变量都被使用，但只是为了与BS定义的网格变量保持一致而声明。 - Bass Jobsen

@BassJobsen 那么你一定是想说 "巨大的" 桌面。 - Rudey

Answer 3

Twitter Bootstrap已经更新至V4版本，现在支持更大尺寸设备 --> http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

- Harry

---

不，你可以使用http://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template。 - Harry

注意，col-xl BS4 等同于 col-lg BS3！ - Jacob van Lingen

Answer 4

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

一份包含Bootstrap网格系统的CSS文件，其中还包括xlg（>1500像素宽度）和xxlg（>2000像素宽度）类。该网格系统将父级div分成了100列。

- Sam Henderson