Bootstrap SASS 5列网格响应式

Question

我另外做了一个宽度为20%的column -x-5列：

.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 -5完全覆盖任何视点上的所有内容(如果我在chrome代码检查中检查它，xs视区是第一优先级，正确的视区紧随其后)。我非常确定这是因为我在导入sass文件之前导入了其他所有内容，但是如果我在网格系统之前导入它，它就会被忽略，因为其他所有内容都会覆盖col xs-5列。

有人知道我是怎么做到这一点的吗？

Answer 1

您想要做的是创建自己的自定义断点，并且使用Bootstrap，这并不像您在示例中想象的那么简单。为了做到这一点，你必须使用Bootstrap来正确地生成东西。This article解释了如何创建自定义断点并查看example GitHub repo。