Jquery 如何基于引导媒体查询断点隐藏/删除类？

是否可以根据设备的屏幕大小显示/隐藏类？ 我正在使用引导默认媒体查询。我有以下默认设置：

/* Bootstrap Media Query Breakpoints

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {...}

/* Extra Small Devices, Phones equivalent to class xs */ 
@media only screen and (min-width : 480px) {...}

/* Small Devices, Tablets equivalent to class sm */
@media only screen and (min-width : 768px) {...}

/* Medium Devices, Desktops equivalent to class md */
@media only screen and (min-width : 992px) {...}

/* Large Devices, Wide Screens equivalent to class lg */
@media only screen and (min-width : 1200px) {...}

我有一个div是这样的：

<div class="col-xs-12 ol-sm-6 col-md-6">

  <div class="pull-right">

    <ul class="header_links">
      <li>
        <a href="#">Member</a>
      </li>
      <li>
        <a href="#">Login</a>
      </li>
      <li>
        <a href="#">Member Registration</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
      <li>
        <a href="#">Cart: 0</a>
      </li>
    </ul>

    <ul class="social_media_links">
      <li>
        <a href="#">
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
       <li>
        <a href="#">
          <i class="fa fa-tumblr-square"></i>
        </a>
      </li>
    </ul>

  </div>
  <div class="clearfix"></div>

</div>

我想要的是，如果媒体查询位于列xs-#中，则类将被隐藏或删除。

---

在bootstrap中可能吗？

bootstrap具有内置的实用程序类，用于根据视口隐藏\显示内容

.visible xs-*

和

隐藏xs

（*=块、内联块或内联）

---

编辑

您将无法覆盖

。请向右拉
，因为它使用
！重要信息
，并且它只应用一个规则（
float:right；
），因此它很容易作为自定义类重新创建

.pull-right-custom {
    float: right;
}

@media only screen and (max-width : 480px) {
    .pull-right-custom {
        float: none;
    }
}

编辑#2

如果您想保持引导的移动第一特性，它将如下所示。。
sm
表示它右拉
sm
或更大的视口（用于语义）

无法隐藏或删除，但可以更改渲染方式

@仅媒体屏幕和（最大宽度：480px）{.pull right{float:none；}

这样，在所有小于480px的媒体屏幕中，这个类将不会使用float:right进行渲染。
我认为正确的方法是使用引导

查看作为参考的，您可以使用它们来扩展自己的类，如：

/*确保已导入引导*/
@导入“bootstrap/less/bootstrap.less”；
.向右拉{
.pull right；/*使元素的行为与.pull right完全相同*/
.visible xs block；/*使元素仅在超小屏幕上可见，等等*/
}

或者，如果您使用的是预编译版本或某个CDN共享版本的引导，只需将此类直接添加到html中，如下所示：

<div class="col-xs-12 ol-sm-6 col-md-6">

  <div class="pull-right">

    <ul class="header_links">
      <li>
        <a href="#">Member</a>
      </li>
      <li>
        <a href="#">Login</a>
      </li>
      <li>
        <a href="#">Member Registration</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
      <li>
        <a href="#">Cart: 0</a>
      </li>
    </ul>

    <ul class="social_media_links">
      <li>
        <a href="#">
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
       <li>
        <a href="#">
          <i class="fa fa-tumblr-square"></i>
        </a>
      </li>
    </ul>

  </div>
  <div class="clearfix"></div>

</div>


...
这是分区内容。但是我想使用断点访问类名，因为实用程序只控制元素的可见性——它们无法按照原始帖子的请求从内部div添加或删除“pull right”类。您需要使用另一个答案中概述的自定义媒体查询，或者使用javascript/jquery来管理它，但是媒体查询方法更简单。@Jerielle我最近的更新稍微好一点（移动优先，语义稍微好一点），所以我会使用它。了解引导的最好方法是打开未统一的css。在.pull left、.pull right和所有工具类（响应工具除外）的情况下，它们适用于所有视口大小。如果您将.pull right和hidden xs组合在同一个元素上
visible xs
是一个更好的解决方案，因为它是由bootstrap本身提供的。然而，您的答案似乎是一个独特的解决方案。
.pull right
类拥有
！重要信息
已应用于它，因此您将无法覆盖它。谢谢。这就是我现在的想法。所以我删除这个类的唯一方法就是根据我需要的断点改变它的主CSS？