如何在 Bootstrap 3 中添加额外的列类？答案

【问题标题】：How can I add extra column classes in Bootstrap 3?如何在 Bootstrap 3 中添加额外的列类？
【发布时间】：2013-09-19 13:30:34
【问题描述】：

Bootstrap 3 将网格系统的 span 类的先前方法更改为更明确的 col-xs、col-md 等。一个很好的改进 imo，但我仍然发现我想添加额外的列类.具体来说，我想为col-md 和col-lg 之间的内容创建一个列类。

我知道我可以更改 LESS 变量以更改标准列类的长度，但我不想修改它们。相反，我希望（如果可能）为不同的屏幕尺寸添加额外的类。

关于如何做到这一点的任何建议？我做了一些研究，但由于 Bootstrap 3 很新，所以我没有找到任何类似的东西。

【问题讨论】：

【解决方案1】：

好吧，那将是更少的 Bootstrap 和更多的 LESS。没必要难，就是费时间。话虽这么说，如果我想创建一个介于两者之间的大小（比如 col-mdlg-*），我会尝试这样做：

创建一个新的 .less 文件，并在 bootstrap.less 文件中 @import。这将允许您使用所有 Bootstrap 特定变量和 mixin。
之后，从 grid.less 复制一些网格内容，用于该导入下方的 md 或 lg，确保在顶部获取默认内容（删除 xs、sm 和 md/lg ，取决于您选择的那个），以及底部的特定大小的东西，并将类更改为您的新类名。
在特定尺寸的顶部，您会看到：
```
@media (min-width: @screen-desktop) {
  .container {
    max-width: @container-desktop;
  }
  //rest of specific stuff here
}
```
您可能希望将@screen-desktop 更改为您希望它触发的最小屏幕宽度的实际值，然后将@container-desktop 更改为容器的最大宽度的实际值。
编译新的less文件和/或将您的代码连接到输出，并享受您的新样式。

【讨论】：

【解决方案2】：

您还可以采取更多不干涉的方法，根本不更改任何 LESS 或 CSS：

... 将其放在您的页面上，并使用数据属性来动态和逐行调整列数。你根本不需要调整类，你会得到新的，所以像“col-md-24”这样的东西就像它总是被定义一样工作。

【讨论】：