Question

我正在尝试在Foundation中实现以下布局。我应该使用哪些推拉类来使最后一列超出桌面中的一列？

      <div class="row">
         <div class="small-12 column large-10">
          First on mobile, First on desktop
          </div>
         <div class="small-12 large-12 column">
         Second on mobile, Third on desktop
         </div>
         <div class="small-12 column large-2>
         Third on mobile, Second on desktop
        </div>
     </div>

Answer 1

首先，您的示例中存在一些语法错误。其次，如果应该是column，则会有columns个班级。

 <div class="row">
     <div class="small-12 columns large-10">
      First on mobile, First on desktop
      </div>
     <div class="small-12 large-12 columns">
     Second on mobile, Third on desktop
     </div>
     <div class="small-12 columns large-2">
     Third on mobile, Second on desktop
    </div>
 </div>

此外，如果您的每列12列，我认为您不能推送/拉出任何12列。我会做一些隐藏/显示第二/第三项的解决方法。像下面的东西。

 <div class="row">
     <div class="small-12 columns large-10">
      First on mobile, First on desktop
      </div>
     <div class="small-12 columns large-2 show-for-large-up">
     Third on mobile, Second on desktop
    </div>                    
     <div class="small-12 large-12 columns">
     Second on mobile, Third on desktop
     </div>
     <div class="small-12 columns large-2 show-for-medium-down">
     Third on mobile, Second on desktop
    </div>                             
 </div>

也许有一种优雅的方法可以通过我不了解的基础对html进行重新排序。但我会将此作为临时修复使用，直到找到更具体的内容。

Answer 2

实际上，你不能！

由于一列12，它几乎像一行。

因此，您无法将列从一行推/拉到另一行。它只能沿着同一行移动它。换句话说，当有2个或更多个div（不是宽度为12列的div）时。

事实上，您应该使用和利用基金会Javascript Utilities，例如matchMedia()或Foundation.utils.is_x函数。

因此，您可以检查浏览器当前是否与作为字符串传入的媒体查询匹配matchMedia（）或使用默认的Foundation媒体查询可用方法：

if (Foundation.utils.is_large_only()) {
    //do something...
} else if (Foundation.utils.is_small_up()) {
    //do something...
}

我强烈建议您阅读Foundation doc（JavaScript Utilities＆gt; Media Queries部分）以了解它的工作原理。

Answer 3

<div class="row">
   <div class="small-12 column large-10" style="background:red;">
    First on mobile, First on desktop
   </div>
   <div class="small-12 column large-2 show-for-large-up" style="background:green;">
   Second on desktop
  </div>
</div>
<div class="row">
  <div class="small-12 column  large-12" style="background:blue;">
  Third on desktop, Second on mobile
  </div>
  <div class="small-12 column show-for-small-only" style="background:yellow;">
  Third on mobile
  </div>
</div>

使用三列

3 个答案: