是否可以仅将特定引导类应用于特定设备而不应用于其他设备。？答案

【问题标题】：Is it possible to apply a particular bootstrap class only for a particular devices and not for other's.?是否可以仅将特定引导类应用于特定设备而不应用于其他设备。？
【发布时间】：2017-06-20 13:46:58
【问题描述】：

例如，我应用了一个输入组类，我希望它仅在通过小型设备访问站点时应用，但如果使用大型设备访问站点，我不希望应用该类。我本可以使用 visible-xs、hidden-xs 类，但我不想这样做，因为我不想更改小型和大型设备的标记。

【问题讨论】：

标签： twitter-bootstrap css

【解决方案1】：

如果您使用的是 Sass 和 BS v4（或 LESS 和 v3.x），您可以创建自己的类，例如 .xs-input-group，并为其应用 input-group.scss 的复制粘贴修改版本（v3 LESS version is in master )

您还必须在 HTML 和预处理器代码中重命名 .input-group-addon 和 .input-group-btn，因为它们的样式原样，而不是像 .input-group .input-group-something {} 这样的保护措施，所以即使没有父母有 .input-group 类，他们仍然有点被 BS 风格...

最好添加前缀或删除 .input-group-lg 和 .*-sm，这取决于您是否打算在某一天使用此大小调整功能。

【讨论】：

【解决方案2】：

为此目的使用 jquery。

if($(window).width() >= 1024){
// call the element by id and add your class
}

您可以参考以下代码。

if($(window).width() >= 1024){
  $('#mydiv').addClass('col-lg-4');
}


<div id="mydiv">
  </div>

希望这会有所帮助！

【讨论】：

使用这 2 个 sn-ps 调整大小后不会发生任何事情，这说明 Bootstrap 中涉及样式输入组的类没有任何意义，如果 OP 不必这样做，恕我直言 .matchMedia() 将是更好的候选者支持 IE8 和 9（即使在这种情况下，也可以假设如果不支持，则它不是移动设备）