基础 5 排侧面样式答案

【问题标题】：foundation 5 row side style基础 5 排侧面样式
【发布时间】：2015-01-08 11:19:56
【问题描述】：

我见过几个使用 Foundation 的网页，其中一个特征是行的宽度。这些页面的优点在于它们在网站的两边都有很棒的样式。

所以问题不在于如何修改行宽，而是如何定位行的两侧以设置样式。

有什么建议吗？谢谢！

【问题讨论】：

【解决方案1】：

不太确定外部行的样式是什么意思，如果您希望元素不包含在行中，您可以通过向 div 添加特定的 css 类和属性来将它们带到外部定位，例如

<div class="row">
  <div id="left-box-off-row" class="small-12 column">
  <!-- Content here -->
  </div>
</div> 
<style>
   #left-box-off-row{left:-20em;width:20em;}
</style>

这只是一个让 div 超出行但保持其行为的示例。不包括行上的 div 也会使它们位于网格之外。你想设计什么元素？

回复后的版本

如果您希望您的内容包含在主网格使用列中，我个人的建议是这样。查看foundation 5文档，但简要说明，每行有12列，所以如果你想安排内容以适应70%的主要内容和30%的侧边栏，我会做这样的事情。

<div class="row">
    <div class="large-2 columns">
        <!-- Your left sidebar content -->
    </div>
    <div class="large-8 columns">
        <!-- Your main content -->
    </div>
    <div class="large-2 columns">
        <!-- Your right sidebar content -->
    </div>
</div>

上面的例子是最简单和最常见的布局之一，一个带有侧边栏的主要内容。如您所见，列数应该加12，因此可以将类更改为大10和大1，通过这种方式，您可以设置额外的类来根据不同的屏幕尺寸改变div的行为，它的美使用框架。

这是对基础 5 的非常基本的理解。看来你已经开始了，没关系，但首先我强烈建议你检查这里给出的文档：http://foundation.zurb.com/docs/，它包括所有基础 5 控件的解释，特别是列的使用，这将帮助你完成很多设计，也有响应，只需几天时间。祝你好运，

【讨论】：

我想要的只是让我的主应用程序在行的宽度内。假设我设置了 70% 的行宽。所以我想做的是，用照片、幻灯片或其他东西来设计每边剩下的 15% 的样式。这就是你的代码的作用吗？非常感谢您的回复！
不，它只是为横幅或类似的东西添加 div，如果您希望剩余的 30% 适应分辨率并保持基础网格，则使用 70% 的行宽会遇到很多麻烦.我的建议将在下一个答案中。
是的，答案一定是你的。我可能会因为这些网站的惊人而感到困惑，并且实际上不能承认它们在哪里完成了简单的网格使用。感谢您的回复乔纳森！