Question

Bootstrap 3改变了网格系统的span类的先前方法，用于更明确的col-xs，col-md等。一个很好的改进imo，但我仍然发现我会喜欢添加额外的列类。具体而言，我想为col-md和col-lg之间的某些内容创建一个列类。

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

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

Answer 1

嗯，那将是更少的Bootstrap和更少。这不一定非常困难，只是耗费时间。话虽如此，如果我想创建一个介于两者之间的大小（比如col-mdlg- *），我会尝试这样做：

在bootstrap.less文件中创建一个新的.less文件和@import。这将允许您使用所有Bootstrap特定变量和mixins。
之后，将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更改为实际值，即容器的最大宽度。
编译新的较少文件和/或将代码连接到输出，并享受新的样式。

Answer 2

你也可以采取更多的手动方式，而不是改变任何LESS或CSS：

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