在媒體查詢更改時將列寬從60％更改爲100％

Question

我正在使用Zurb Foundation 3框架，並且我具有以下佈局。

<div class="row"> 
    <div class="eight columns"> 
    Main content... 
    </div> 
    <div class="four columns hide-for-medium"> 
    Sidebar... 
    </div> 
</div> 

我怎樣才能讓八柱網佔用100％的寬度時，四個柱網disappears on medium sized displays的？目前，在四列網格顯示爲「display：none」的情況下，在中等大小的顯示器上，八列網格在理想情況下仍將佔據八列，但將填充12列（全寬）。

Answer 1

我設法解決了我的問題，它只需要一個特定的媒體查詢並重寫寬度和浮點值。

@media only screen and (max-width: 1279px) and (min-width: 768px) { 
    .test { 
    float: none !important; 
    width: auto !important; 
    } 
}