Question

我正在使用基金会。我的导航栏目前占用3列，我的内容占据了最右边的9列。

对于尺寸small，我只想显示这9列。我希望所有的比例都保持不变。

有没有办法简单地“隐藏”前3列，以便我可以保持所有尺寸相同（例如medium-3 medium-3 medium-3），但现在9列占据整页宽度？

我看到的另一个选项是将总列数设置为36，并进行所有数学计算，以使列最终相同，但这似乎不太理想。

Answer 1

您正在寻找的是visibility classes（此链接适用于Foundation 6; click here如果您使用的是Foundation 5）。请阅读，因为此页面有许多有用的可见性选项。

您可以通过仅隐藏（基础5＆amp; 6）来达到您想要的效果：

<div class="row">
  <div class="medium-3 columns hide-for-small-only">
    <!-- navigation bar -->
  </div>
  <div class="medium-9 columns">
    <!-- main content -->
  </div>
</div>

或显示中等和更大（基础6）：

<div class="row">
  <div class="medium-3 columns show-for-medium">
    <!-- navigation bar -->
  </div>
  <div class="medium-9 columns">
    <!-- main content -->
  </div>
</div>

或显示中等和更大（基础5）：

<div class="row">
  <div class="medium-3 columns show-for-medium-up">
    <!-- navigation bar -->
  </div>
  <div class="medium-9 columns">
    <!-- main content -->
  </div>
</div>

隐藏特定尺寸的某些列？

1 个答案: