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

Posted 2023-03-06

【中文标题】如何隐藏/删除基于 Bootstrap 媒体查询断点的类？

【英文标题】：How to hide/remove a class based on Bootstrap media query breakpoints?

【发布时间】：2015-01-22 23:09:16

【问题描述】：

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

/* 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的最好方法是打开未缩小的css。对于 .pull-left、.pull-right 和所有实用程序类（响应式实用程序除外），它们适用于所有视口大小。如果你在同一个元素上结合 .pull-right 和 hidden-xs

【参考方案1】：

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

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

.visible-xs-* 和 .hidden-xs（* = 块、内联块或内联）

---

编辑

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

.pull-right-custom 
    float: right;


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

编辑#2

如果您想保持引导程序的移动优先性质，它看起来像这样..sm 表示它直接拉到sm 或更大的视口（用于语义）。

.pull-right-sm 
    float: none;


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

【讨论】：

是分区内容。但我想使用断点访问一个类名

这些实用程序仅控制元素的可见性 - 它们无法根据原始帖子的要求从内部 div 添加或删除“pull-right”类。您需要使用此处另一个答案中概述的自定义媒体查询或使用 javascript/jquery 来管理它，但媒体查询方法更容易。

@Jerielle 我最近的更新稍微好一点（移动优先和语义化），所以我会使用那个。

【参考方案2】：

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

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

因此，这样，在所有小于 480px 的媒体屏幕中，此类将不会使用 float:right 呈现。

【讨论】：

visible-xs 是一个更好的解决方案，因为它由引导程序本身提供。但是，您的答案似乎是一个独特的解决方案。

.pull-right 类已应用!important，因此您将无法覆盖它。

谢谢。这就是我现在的想法。因此，我可以删除该类的唯一方法是根据我需要的断点来更改它的主 CSS？

【参考方案3】：

我认为正确的做法是使用 Bootstrap 的responsive utilities。

看看source code of visibility mixins definition作为参考，你可以用它们来扩展你自己的类，比如：

/* make sure that you've imported Bootstrap */
@import "bootstrap/less/bootstrap.less";

.pull-right-custom 
  .pull-right; /* to make element behave exactly like .pull-right; */
  .visible-xs-block; /* to make element visible only on extra-small screens, etc... */

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

<div class="pull-right visible-xs-block">
  ...
</div>