Question

我正在使用我的第一个Bootstrap页面，并希望仅对平板电脑肖像和智能手机应用一些更改。不知何故，我在媒体查询中所做的所有更改都不会应用于页面（例如红色边框作为测试）。有人知道为什么吗？

@media (max-width: 768px) and (min-width: 481px) {
.pull-left, .pull-right{
    margin:0 auto; 
    display:block; 
    float: none !important;

}
.standard-element {
    border: 1 px solid red;
}
}

/* Mobile */
@media (max-width: 480px) and (min-width: 0px) {
.pull-left, .pull-right{
    margin:0 auto; 
    display:block; 
    float: none !important;
}
.standard-element {
    border: 1 px solid red;
}
}

Answer 1

尝试此查询：

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Landscape phones and smaller */
@media (max-width: 480px) {

}

Answer 2

边框：1 px实心红色是错误的必须是边框：1px纯红色。 1和px之间的空白可能会导致问题。

Answer 3

你可以尝试这样的。您需要使用新的容器div来环绕图像标记。

<div class="row">
  <div class="col-xs-4 col-md-6"></div>
     <div class="col-xs-4 col-md-6">
        <img style="border:1px solid red" src="" class="img-responsive pull-right" alt="">
     </div>
   <div class="col-xs-4 col-md-6"></div>
 </div>

未应用Bootstrap页面上的媒体查询

3 个答案: