Question

我是bootstrap（v3.3.7）的新手，并尝试更改320 x 480视图，我理解这将使用col-xs- 。设置。我知道这些是硬编码到BS3但是对于我的生活，不能覆盖小设置。我所要做的就是改变字体颜色。应该很容易吗？

我尝试过@media查询的各种组合，但没有任何效果。所有其他决议工作正常。我发布了我的代码，如果有人能给我指针，我会很感激。非常感谢。

HTML CODE

<footer id="footer">
    <div class="thumbnail">
      <div id="sub-header">
        <div class="container">
          <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 1</p>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 2</p>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 3</p>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 4</p>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>©2017 Somesite.net</p>
      </div>
    </div>
  </footer>

CSS代码

.copyright  p {
    text-align: center;
    color:yellow;   
}

@media(min-width:767px) and (max-width:990px) { **<--- This one not working**
  .copyright p {
    color: grey;
  }
}

@media(min-width:768px) and (max-width:991px) { 
  /* Styles */
  .pricingTable>.pricingTable-header:after {
    border-left: 215px solid transparent;
  }
  .copyright p {
    text-align: center;
    color: blue;
  }
}
@media(min-width:992px) and (max-width:1199px) {
  .copyright p {
    text-align: center;
    color: green;
  }
}
@media(min-width:1200px) {
  .copyright p {
    text-align: center;
    color: yellow;
  }
}

编辑：也许此代码导致问题。

    /*** CODE FOR PRICING TAGS ***/

    .pricingTable {
      text-align: left;
      background-color: #ffe400 !important;
      padding-top: 5px;
      transition: all 0.5s ease-in-out 0s;
      border: 3px solid white;
      border-radius: 5px;
    }
    .pricingTable>.pricingTable-header {
      color: #000 !important;
      height: 75px;
      position: relative;
      transition: all 0.5s ease 0s;
    }
    .pricingTable>.pricingTable-header:after {
      content: "";
      /*border-bottom: 40px solid #727cb6;*/
      /*border-left: 263px solid transparent;*/
      position: absolute;
      right: 0px;
      bottom: 0px;
    }
    .pricingTable:hover .pricingTable-header {
      /*height: 230px;*/
      /*transition: all 0.5s ease 0s;*/
    }
    .pricingTable-header>.heading {
      display: block;
      padding: 0;
    }
    h3 .heading {
      margin-left: 25px;
    }
    .price-value {
      margin-left: 25px;
    }
    .heading>h3 {
      margin: 0;
      text-transform: uppercase;
      margin-left: 25px;
    }
    .pricingTable-header>.price-value {
      display: block;
      font-size: 60px;
      line-height: 60px;
    }
    .pricingTable-header>.price-value>.mo {
      font-size: 14px;
      display: block;
      line-height: 0px;
      text-transform: uppercase;
    }
    .pricingTable-header>.price-value>.currency {
      font-size: 24px;
      margin-right: 4px;
      position: relative;
      bottom: 30px;
    }
    .pricingTable>.pricingContent {
      text-transform: uppercase;
      color: #000
    }
    .pricingTable>.pricingContent>ul {
      list-style: none;
      padding-left: 22px;
    }
    .pricingTable>.pricingContent>ul>li {
      padding: 0;
      border-bottom: 0;
    }
    .pricingTable>.pricingContent>ul>li:last-child {
      border: 0px none;
    }
    .pricingTable-sign-up {
      padding: 10px 0;
    }
    .pricingTable-sign-up>.btn-block {
      width: 100%;
      margin: 0 auto;
      background: #000;
      /*border: 2px solid #fff;*/
      color: #fff;
      padding: 15px 12px;
      text-transform: uppercase;
      font-size: 14px;
    }

@media screen and (max-width: 1200px){
    .pricingTable > .pricingTable-header:after{
        border-left: 215px solid transparent;
    }
}
@media screen and (max-width: 990px){
    .pricingTable{
        margin-bottom: 20px;
    }
    .pricingTable > .pricingTable-header:after{
        border-left: 349px solid transparent;
    }
}
@media screen and (max-width: 480px){
    .pricingTable{
        overflow: hidden;

Answer 1

您正在覆盖“有缺陷”的媒体查询。这是按预期工作的。

copyright p {
        color: yellow;
    }
    
    @media (max-width:767px) {
        .copyright p {
            color: grey;
        }
    }
    
    @media(min-width:768px) and (max-width:991px) {
        /* Styles */
        .pricingTable>.pricingTable-header:after {
            border-left: 215px solid transparent;
        }
        .copyright p {
            text-align: center;
            color: blue;
        }
    }
    
    @media(min-width:992px) and (max-width:1199px) {
        .copyright p {
            text-align: center;
            color: green;
        }
    }
    
    @media(min-width:1200px) {
        .copyright p {
            text-align: center;
            color: yellow;
        }
    }

<body>
    <div class="copyright">
        <p>©2017 Somesite.net</p>
    </div>
</body>

进一步解释媒体查询：

如果您希望某些样式发生在Xpx宽度：

之上

@media (min-width: Xpx){}

如果您想使用Xpx宽度以下的某些样式：

@media (max-width: Xpx){}

如果您想在Xpx和Ypx宽度之间使用一些样式：

@media (min-width: Xpx) and (max-width: Ypx){}

@media查询无法识别

1 个答案: