更改CSS如果引導山坳不是水平

Question

我有一個簡單的引導佈局

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-8"> 
       <div class="upper"></div> 
     </div> 
     <div class="col-sm-4"> 
       <div class="lower"></div> 
     </div> 
    </div> 
</div> 

CSS

.upper { 
height: 100%; 
width: 100%; 
} 

.lower { 
height: 100%; 
width: 100%; 
} 

如果屏幕是SM，上格將ontop的另下方。每個填充100% width and height。但是，如果屏幕是sm，它會使upper僅具有80% height。有什麼方法可以在bootstrap中解決這個問題嗎？或者用jquery或者其他一些聰明的方式。

Answer 1

可以SM以後的各DIV添加XS類或者你可以用媒體查詢也

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-8 col-xs-8"> 
       <div class="upper"></div> 
     </div> 
     <div class="col-sm-4 col-xs-4"> 
       <div class="lower"></div> 
     </div> 
    </div> 
</div> 

或

@media only screen and (max-width: 768px) { 
.upper { 
height: 80%; 
width: 80%; 
} 

.lower { 
height: 80%; 
width: 80%; 
} 
} 

做

Answer 2

你可以用CSS響應媒體查詢做到這一點：

@media (min-width: 768px) { 
    .upper { 
     height: 80%; 
    } 
} 

這樣的意義與您現有的CSS，作爲引導有利於移動優先的發展方針。您現有的用於.upper的CSS規則僅適用於特小（xs）視口，並且當視口伸出（小/ sm）時，此規則將覆蓋您的xs規則。