2

我的代码如下所示:

<link rel="stylesheet" href="css/foundation.css" media="all">
<div class="row">
<div class="large-12 columns">
    <div class="large-6 column">
        Lorem ipsum 
    </div>
    <div class="large-6 column">
        Lorem ipsum 
    </div>
</div>
</div>

在浏览器中看起来应该是 浏览器

但是当我想打印它时 - 它就像手机/平板电脑视图 在此处输入图像描述

我需要在 DIN A4 页面和浏览器中有两个可见的列。有没有办法处理它。或者甚至比 Zurb.Foundation 4 更好的框架来解决这个问题?

此致。

4

2 回答 2

0

对于移动设备,您应该将类​​添加small-12到容器(即您拥有的地方large-12)和small-6您拥有的地方large-6。对于打印,我建议添加例如一个print-6具有 50% 宽度并相应浮动的自定义类。

于 2013-07-30T19:40:42.837 回答
-1

如果你曾经有这个问题。尝试 Bootstrap,因为 Foundation 中还没有真正的解决方案。至少我没有找到。

引导程序:

<div class="row">
 <div class="col-6 col-sm-6 col-lg-6">
    Lorem ipsum 
  </div>
  <div class="col-6 col-sm-6 col-lg-6">
    Lorem ipsum 
 </div>
</div>
于 2013-07-31T04:58:55.250 回答