Question

我使用zurb-foundation得到以下网格：

<div class="row">
 <div class="small-6 large-3 columns">&nbsp;</div>
 <div class="small-6 large-9 columns">&nbsp;</div>
</div>

上面的网格使两列的布局。但是，我想在小屏幕中知道上面的布局是一个列布局而不是两列6。换句话说，我希望该行的第二个div作为小屏幕的新行。

Answer 1

假设您正在使用标准的12列网格并且未对其进行修改，那么只需将其设为12：

<div class="row">
 <div class="small-12 large-3 columns">&nbsp;</div>
 <div class="small-12 large-9 columns">&nbsp;</div>
</div>

只要知道小过滤器就可以了......所以在这个例子中＆＃34; medium＆＃34;也将是12.如果你想让媒体看起来像大，那么这样做：

<div class="row">
 <div class="small-12 medium-3 columns">&nbsp;</div>
 <div class="small-12 medium-9 columns">&nbsp;</div>
</div>

请注意，您不需要上面示例中的大片作为媒体过滤到上面的所有内容。

Answer 2

使用下面的Html你可以有偏移并且在移动屏幕上有居中的div。并且在较大的屏幕上分别有大3和大9的div。

<div class="row">
  <div class="small-6 small-offset-3 large-3 large-offset-0 columns ">..</div>
  <div class="new small-6 small-offset-3 large-9 large-offset-0 columns">..</div>
</div>

在基础css列中，最后一个子项向右浮动。因此我们将其更改为向左浮动以使两个div在另一个之后堆叠

.new{
float:left;
}

Answer 3

这样的事情应该有效：

<div class="row">
    <div class="medium-6 large-3 columns">
        <div class="small-6 medium-12 large-12 columns">column 1</div>
    </div>
    <div class="medium-6 large-9 columns">
        <div class="small-6 medium-12 large-12  columns">column 2</div>
    </div>
</div>

http://jsfiddle.net/6tMZH/

Answer 4

应该是一个简单的修复：

.columns {
    width:100%;
}

You can see it here

基础5如何为小屏幕制作一列

4 个答案: