问

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

乌鸦_Hrt 发布于 2022-12-09 18:22

bootstrap

是否可以根据设备的屏幕尺寸显示/隐藏类？我正在使用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:



  

    
      
        Member
      
      
        Login
      
      
        Member Registration
      
      
        Help
      
      
        Cart: 0

我想要的是如果媒体查询在col-xs-#中,则类右拉将被隐藏或删除.是否可以在bootstrap中？

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;
    }
}
```
2022-12-11 02:08 回答

优美rosner_704

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签