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 - ＃，则会隐藏或删除右拉类。是否可以在bootstrap？

Answer 1

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

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

.visible-xs-*和.hidden-xs（* = block，inline-block或inline）

修改

您将无法覆盖.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或更大的视口（对于语义）上向右拉。 / p>

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

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

Answer 2

无法隐藏或删除，但您可以更改将呈现的方式

@media only screen and（max-width：480px）{。drop-right {float：none;}}

因此，通过这种方式，在所有小于480px的媒体屏幕中，此类将不会使用float：right进行渲染。

Answer 3

我认为正确的方法是使用Bootstrap＆＃39; 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>

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

3 个答案: