Bootstrap SASS 5 列网格响应式

Question

我做了一个额外的 col-x-5th 列，宽度为 20%：

.col-xl-5th {
  @include make-xl-column(2.4)
}
.col-lg-5th{
  @include make-lg-column(2.4)
}
.col-md-5th{
  @include make-md-column(2.4)
}
.col-sm-5th{
  @include make-sm-column(2.4)
}
.col-xs-5th {
  @include make-xs-column(2.4)
}

很简单的东西。我的问题在于尝试使用它来制作响应式布局。将这样的类放在元素上：

col-xs-5th col-sm-4 col-md-3 col-lg-3 col-xl-2

导致 col-xs-5th 完全覆盖任何视点上的所有内容（如果我在 chrome 代码检查中检查它，xs 视口是第一优先级，正确的视口紧随其后）。我很确定这是因为我在其他所有内容之后导入 sass 文件，但是如果我在网格系统之前导入它，它只会被忽略，因为其他所有内容都会覆盖 col-xs-5th 列。

有人知道我如何实现这一目标吗？

Answer 1

您要做的是创建自己的自定义断点，并使用 Bootstrap，它并不像您在示例中想象的那么简单。为此，您必须使用 Bootstrap 正确生成内容。 This article 解释了如何创建自定义断点并查看 example GitHub repo。