css - 在媒体查询更改时将列宽从 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% 的宽度？在中型显示器上，当四列网格变为“显示：无”时，八列网格仍然只占用八列，而理想情况下它会填满 12 列（全宽）。

Answer 1

我设法解决了我的问题，它只需要一个特定的媒体查询并覆盖宽度和浮点值。

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