Question

我在aspx页面中使用HTML / CSS内容。

我希望在切换到移动视图时隐藏特定的div部分（包括一些css类）。

我尝试过使用以下内容：

将bootstrap属性设置为：

 @media screen and (max-width: 600px){}

并将CSS / class属性设置为：

  {visibility: hidden;}

但是当测试代码时，它会永久地隐藏div。

Code Bootstrap：

 @media screen and (min-width: 768px)



   .col-md-7 {
      width: 58.33333333%;
    }

   .service {
      background: #005366;
      color: #999;
      margin-bottom: 10px;
   }

   .service h4 a{
      color: #fff;
   }

   .service img {
      float: right;
      margin-left: 10px;
      -webkit-transition: all 0.3s ease 0.1s;
      -moz-transition: all 0.3s ease 0.1s;
      -ms-transition: all 0.3s ease 0.1s;
      -o-transition: all 0.3s ease 0.1s;
      transition: all 0.3s ease 0.1s;
    }

   .service img:hover {
      opacity: .9;
    }

   .service-in {
      padding: 15px 0 0 10px;
      min-height: 150px;
    }

提前谢谢你。

Answer 1

您粘贴的代码未显示您隐藏的确切css。向我们展示如下所示的代码（或使用下面的代码）

@media screen and (max-width: 600px){
   .yourClassName {
      visibility: hidden;
    }
}

或者，

@media screen and (max-width: 600px){
   .yourClassName {
      display: none;
    }
}

你的div被永久隐藏意味着媒体查询可能没有被正确应用。

帮助我们为您提供帮助。欢迎。

Answer 2

您的媒体查询没有开始和结束。使用括号{}

@media screen and (max-width: 600px) {

       .yourclass {
          //your styles
       }
}

仅在移动视图中隐藏特定div

2 个答案: