jquery - 如何隐藏/删除基于 Bootstrap 媒体查询断点的类？

Question

是否可以根据设备的屏幕尺寸显示/隐藏类？我正在使用 Bootstrap 默认媒体查询。我有这个默认设置:

/* 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>

我想要的是，如果媒体查询在 col-xs-# 中，则 pull-right 类将被隐藏或删除。是否可以在 bootstrap 中实现？

Answer 1

Bootstrap 具有内置实用程序类，用于根据视口(viewport)隐藏\显示内容。

http://getbootstrap.com/css/#responsive-utilities

.visible-xs-* 和 .hidden-xs(* = block 、内联 block 或内联)

---

编辑

您将无法覆盖 .pull-right，因为它使用 !important，并且它只应用一个规则(float: right;)，因此很容易将其重新创建为自定义类。

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

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

编辑#2

如果你想保持 Bootstrap 的移动优先性质，它看起来像这样.. sm 表示它在 sm 或更大的视口(viewport)上正确拉动(用于语义)。

.pull-right-sm {
    float: none;
}

@media only screen and (min-width : 480px) {
    .pull-right-sm {
        float: right;
    }
}