Question

我正在尝试上课＆＃34; pad1＆＃34;在我的Ipad上工作（宽度为768像素），

所以我尝试了这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<style>
@media (min-width: 767px) and (max-width:991px){ 
    .pad1 {
        margin-top: 150px;
    }
}

</style>

<div class="container">

  <div class="row pad1">

    <div class="col-sm-4" style="background-color: orange;">

    AAAAA

    </div>

  </div>

</div>

</body>

</html>

但填充不起作用，而如果我删除and (max-width:991px)部分它就可以工作..

我还尝试了其他帖子中的其他解决方案，例如：

@media only screen and (min-device-width: 767px) and (max-device-width: 991px) and (orientation:portrait) {

  .pad1 {
      margin-top: 150px;
  }

但它仍然不起作用，我被困在这里，我绝对需要限制这个类的max width，你有任何解决方案吗？

谢谢

Answer 1

更改为：

@media all and (min-device-width:767px) and (max-device-width:991px){ 
    .pad1 {
        margin-top: 150px;
    }
}

我希望，帮助你。

Bootstrap：@media min-width AND max-width在Ipad上不起作用

1 个答案: