Question

我在我的html中使用了bootsrap。我希望在屏幕分辨率从大到小或从小变化时更改div的背景颜色。我添加了类但是当我更改屏幕分辨率时它没有反映。这是我的代码 http://plnkr.co/edit/6sSYngN0hn2tZZ1wDEML?p=preview

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
    <style>
.col-lg-12{
    height: 50px;
    background: red !important;

}

.col-md-12{
    height: 50px;
    background: yellow !important;

}
.col-xs-12{
    height: 50px;
    background: black !important;
}
.col-sm-12{
    height: 50px;
    background: blue !important;

}

</style>
<body>


<div class="container-fluid">

    <div class="row">

        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
        </div>
    </div>
</div>

    <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.6/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

它没有用，因为您在没有媒体查询的情况下定义了CSS属性。由于所有类都已添加到公共DIV，因此应用了具有最高特异性的CSS属性。

以下是使其有效的解决方案。

＆＃13;

@media (max-width: 767px) {
  .col-xs-12 {
    height: 50px;
    background: black !important;
  }
}
@media (min-width: 768px) {
  .col-sm-12 {
    height: 50px;
    background: blue !important;
  }
}
@media (min-width: 992px) {
  .col-md-12 {
    height: 50px;
    background: yellow !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-12 {
    height: 50px;
    background: red !important;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Basic Bootstrap Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- Optional Bootstrap theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>

<body>


  <div class="container-fluid">

    <div class="row">

      <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
        hi
      </div>
    </div>
  </div>

  <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.6/js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

为什么背景颜色不变？

1 个答案: