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頁面上的媒體查詢未應用

回答

相關問題