Question

我用bootstrap创建了一个网页。我在.corset课程中有一个.container。 .corset具有以下规范：

.corset {
  -webkit-box-shadow: 3px 3px 5px 3px rgba(186,186,186,1);
  -moz-box-shadow: 3px 3px 5px 3px rgba(186,186,186,1);
  box-shadow: 3px 3px 5px 3px rgba(186,186,186,1);
}

我想实现移动设备上的box-shadow设置为none。我知道有一些辅助类，如.hidden-xs或.visible-*-*，但我不想隐藏.corset，我只是想在手机上编辑它的规格。有帮助吗？

谢谢！

Answer 1

使用媒体查询。 Bootstrap也支持that。

例如，在你的情况下会是这样的：

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    .corset {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
}

Answer 2

解决方案1
使用@media查询：小屏幕的特定规则


    @media only screen {
        /*small screen css*/
    }
    @media only screen and (min-width: 950px) {
        /*desktop css*/
    }

但是如果没有用户代理通过javascript嗅探，你就无法真正发现手机。 http://detectmobilebrowsers.com/
就是一个例子。然后将.mobile类添加到html元素，然后定义.mobile .corset{}规则

Bootstrap - 删除移动设备上的box-shadow

2 个答案: