Boostrap网格 - 与所有分辨率相同的值

Question

只是一个优化问题。有没有办法为所有分辨率设置相同的值class="col-xx-[value]？

当我想设置相同的网格宽度时，我使用：

class="col-lg-4 col-md-4 col-sm-4 col-xs-4"

有没有办法简单地使用：

class="col-all-4"

或

class="col-4"

代码会更干净，看起来更好+你不必打字，特别是当你必须在几个元素上使用它时。

注意：我还没有在互联网上找到任何令人满意的答案。

编辑：我想我可以使用一些JS：

if ($(*).hasClass('col-4').each(function() {
  $(this).removeClass('col-4');
  $(this).addClass('col-lg-4 col-md-4....');
}

当然这个JS代码应该更好地构建，但我认为你将会得到我的目标。

Answer 1

来自Bootstrap docs：

  

每层课程都会向上扩展，这意味着如果您计划为xs和sm设置相同的宽度，则只需指定xs。

所以你只需要使用col-xs-4。

Answer 2

从技术上讲，你可以创建它，它会非常简单。 Bootstrap使用@media标签在不同的分辨率下实现这些可能性，因此您可以为每个分辨率创建一个带有@media标记的CSS类，然后复制引导程序用于这些特定类的内容。例如：

.col-4{
  @media (min-width: 1200px) {
  }
  @media (min-width: 992px) {
  }
  @media (min-width: 768px) {
  }
  @media (max-width: 767px) {
  }
}

就个人而言，我不会烦恼，bootstrap是一个很好的框架，内置了所有内容，即使它是一些代码字符。它还使其他人更容易维护和更容易查看您的代码并了解正在进行的操作。