Question

所以我试图让我的网页响应，而且几天前我发现使网页响应的主要css修改是@media规则现在问题是

@media (min-width: 768px) and (max-width: 979px) {
    .dropdown-content {
      margin-left:10%
 }
}

bootstrap-responsive.css的这一部分，我称之为网页的平板电脑窗口版本工作正常。但是什么时候切换到移动窗口版本，即max-width：767px; html页面没有读取它

@media (max-width: 767px) {
  .dropdown:hover .dropdown-content {
      display:none;
 }
}

此部分代码未在移动窗口版本中读取。我想要做的是在平板电脑版本中使用上面的第一个css代码，在移动版本中使用上面的第二个css代码。它与某些js文件有关还是我错过了其他的东西？请帮我解决一下。

编辑： - 我已经更改了上面的属性，并在此处添加了一些HTML代码

<li class="dropdown">
    <a href="policies.php">Policy</a>
      <div class="dropdown-content">
        <!--dropdown-content div-->
      </div>
</li>

默认情况下，下拉内容的属性为

 .dropdown-content{
    display:none;
    }

当我将鼠标悬停在下拉列表时，以下代码将采取措施

    .dropdown:hover .dropdown-content{
        display:block;
    }

而在移动窗口版本中，我想再次隐藏它，以便将鼠标悬停在下拉列表中不会显示下拉内容

Answer 1

您需要使用此@media only screen and (max-width:767px){}代替@media (max-width: 767px) {}

＆＃13;

@media only screen and (max-width:767px) {
  .class_name { width:200px; height:200px; background:#ccc;
      /*attribute_change2;*/
 }
}

＆＃13;

<div class="class_name"></div>

＆＃13;

Answer 2

点击展开右边的“RUN CODE SNIPPET”你会找到工作示例。

请参阅此link ..

试试这个：

body {
  height: 100%;
  margin: 0;
  font-family: 'Unica One', sans-serif;
  background: #fff;
}
#main-nav li:hover ul{display:block;}
h1{font-size:25px;}
.navbar-toggle span{background:#000;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<nav id="header" class="container">
		<div id="navi" class="navbar-header">
			<div class="container">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar b1"></span> <span class="icon-bar b2"></span> <span class="icon-bar b3"></span> </button>
				<h1 class="pull-left"><a href="#">BRAND NAME</a></h1>
				<div class="navbar-collapse collapse">
					<ul id="main-nav" class="nav navbar-nav navbar-right">
						<li><a href="#">Link1</a></li>
						<li class="dropdown">
							<a href="policies.php">Policy <i class="fa fa-caret-down"></i></a>
							<ul class="dropdown-menu dropdown-content">
								<li><a href="#">Link4</a></li>
								<li><a href="#">Link4</a></li>	
							</ul>
						</li>
						<li><a href="#">Link4</a></li>
						<li><a href="#">Link4</a></li>
					</ul>
				</div>
			</div>
			
		</div>
	</nav>

@media（max-width：767px）{/ * content * /}不起作用

2 个答案: