Html Boostrap grid-所有分辨率的值相同

只是一个优化问题。有没有办法将相同的值设置为所有分辨率

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

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

有什么方法可以简单地使用：

class="col-all-4"

或

?

代码会更干净，看起来也会更好+您不必输入太多，尤其是当您必须在几个元素上使用它时

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

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

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

当然，这段JS代码应该构建得更好，但我想你会明白我的意思。

来自：

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

---

因此，您只需要使用

col-xs-4

技术上您就可以创建它，而且它将相当简单。Bootstrap使用@media标记使这些在不同分辨率下成为可能，因此您可以为每个分辨率创建一个带有@media标记的大型CSS类，然后为这些特定类复制Bootstrap中的内容。例如e:

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

---

就我个人而言，我不想麻烦，bootstrap是一个很好的框架，它内置了所有这些，即使它是代码的几个字符。它也使它更易于维护，让其他人更容易查看您的代码并知道发生了什么。

直接回答在bootstrap网格中不可能。因为所有网格都有自己的宽度，这就是为什么如果y你想要完美的响应，你应该使用那些网格。你想在引导中使用非响应网格吗？例如，我有一个容器，它是响应的，里面有两列（4和8宽），我需要它们总是这样；）它真的工作了！因为引导的

@media

标记只有例如

（最小宽度：768）

（没有会阻止通过的最大宽度），然后将此宽度传递到更高的分辨率。谢谢！

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