Zurb基金會4大3到基於媒體查詢大4

Question

我有一個項目中的以下情況

<div class="row"> 
    <div class="large-3"></div> 
    <div class="large-3"></div> 
    <div class="large-3"></div> 
    <div class="large-3"></div> 
</div> 

我想用媒體查詢修改隱藏一個div（大-3）對於一定的寬度，讓其他三個很大 - 4 我該如何實現這一目標？

感謝

Answer 1

應該有這樣做更有效的方式，但是這是我想到的第一件事：

樣本HTML：

<div class="row design-4-columns"> 
    <div class="large-3 columns"></div> 
    <div class="large-3 columns"></div> 
    <div class="large-3 columns"></div> 
    <div class="large-3 columns"></div> 
</div> 

<div class="row design-3-columns"> 
    <div class="large-4 columns"></div> 
    <div class="large-4 columns"></div> 
    <div class="large-4 columns"></div> 
</div> 

你的CSS是什麼像這樣：

/* Used to alter styles for screens at least 500px wide.*/ 
@media only screen and (min-width: 500px) { 

    .design-4-columns { 
     display: none !important; 
    } 

}