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

我在第一个Bootstrap页面上，希望仅对Tablet肖像和智能手机应用一些更改。不知何故，我在媒体查询中所做的所有更改都不会应用于页面（例如红色边框作为测试）。有人知道为什么吗？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; 
} 
}

来源

2014-09-06 herbigt

边框：1像素固冲错了，它一定是边界：1px的红色。 1和px之间的空白可能会导致问题。

来源

2014-09-06 10:17:39

是的，现在应用边框。所以查询被识别，但图像的居中不是 - 你有一个想法，为什么？ – herbigt 2014-09-06 10:26:53

将图像垂直居中在红色边框div上或将红色边框div居中水平放在屏幕上？ – 2014-09-06 10:33:35

将图像水平居中在红色边框格（适用于人像平板电脑和智能手机）内。我不得不使用.pull-right和.pull-left将它们放置在桌面布局上。 – herbigt 2014-09-06 10:40:15

试试这个查询：

/* 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) { 

}

来源

2014-09-06 10:14:07

你可以尝试这样。你需要用一个新的容器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>

来源

2014-09-06 10:51:43

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

回答

相关问题