twitter-bootstrap - 如何在 Bootstrap 3 中添加额外的列类？

Question

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

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

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

score 5 · Accepted Answer

好吧，那将是更少的 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 文件和/或将您的代码连接到输出，并享受您的新样式。

score 1 · Accepted Answer

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

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

2 回答 2