如何在BootStrap中更改视口时替换元素类

Question

如何在视口更改时更改元素类

例如，当BootStrap在视口“lg”上呈现元素时，元素有一个名为“css-class”的类，所以当视口为“md”时，我需要将该元素类更改为“css-class2”

Answer 1

如果要根据视口为元素提供类，可以根据Bootstrap的视口编写一个简单的JavaScript检查。

if(screen.width >= bootstrap-viewport) {
  $(elements).removeClass('otherClasses');
  $(elements).addClass('someExampleClass');
}

但是，您可以在CSS中使用媒体查询为每个视口提供特定样式的元素。这是一种更清洁，更易于维护的解决方案。一个小例子：

.content-area {
  line-height: 1.2em;
}

@media(min-width: @screen-desktop) {
    .content-area {
      line-height: 1.6em;
    }
}