如何基于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-#中,则类右拉将被隐藏或删除.是否可以在bootstrap中？

Answer 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

如果你想保持bootstrap的移动优先性质,它将看起来像这样......它sm会指示它正确拉动sm或更大的视口(用于语义).

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

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