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; 
    } 

}