無法獲取自定義媒體查詢以使用引導主題

Question

我正在使用Twitter Bootstrap佈局的主題版本來構建網站，並且我所有的自定義CSS都可以正常工作，但@media查詢例外。任何人都可以看到我做錯了什麼？

HTML：

<section id="lessons" class="bg-black no-padding lesson-content"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-4"> 
     <img src="/clients/wt/images/lesson_01.jpg" alt="Image 1" /> 
     <img src="/clients/wt/images/lesson_03.jpg" alt="Image 3" /> 
     </div> 
     <div class="col-lg-4 hideable"> 
     <img src="/clients/wt/images/lesson_02.jpg" alt="Image 2" /> 
     <img src="/clients/wt/images/lesson_04.jpg" alt="Image 4" /> 
     </div> 
     <div class="col-lg-4 text-right expandable"> 
     <h3>Content Title</h3> 
     <p>More content here</p> 
     </div> 
    </div> 
    </div> 
</section> 

CSS：

@media screen and (max-width: 900px) { 
    .hideable { 
    display: none; 
    } 
    .expandable { 
    width: 66.6666667%; 
    } 
} 

這裏的目標是，.hideable列將消失，.expandable一個將填補其位置。如果你想看到完整的開發網站，可以在http://tentenstudios.com/clients/wt/找到。如果你調整窗口的大小，你會看到「Lessons」區域中的中間照片沒有消失。

Answer 1

的引導CSS包含：

@media (min-width: 1200px) 
.col-lg-4 { 
    width: 33.33333333%; 
} 

和

@media (min-width: 1200px) 
.col-lg-1, .col-lg-10, .col-lg-11, 
.col-lg-12, .col-lg-2, .col-lg-3, 
.col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9 { 
    float: left; 
} 

要實現什麼，我認爲你正在尋找你必須保持雙方超越1200像素的最小寬度的樣式。所以像這樣的東西應該工作：

@media screen and (max-width: 1200px) { 
    .col-lg-4 { 
    width: 33.33333333%; 
    float: left; 
    } 
    .hideable { 
    display: none; 
    } 
    .expandable { 
    width: 66.6666667%; 
    } 
}