基础 5 行侧样式

Question

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

因此，问题不在于如何修改行宽，而在于如何定位行的边以设置它们的样式。

有什么建议吗？谢谢！

Answer 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，因此类可以更改为 large-10 和 large-1，通过这种方式，您可以设置其他类来根据不同的屏幕尺寸更改div 行为，这就是使用框架的美妙之处。

这是对基础5是什么的非常基本的理解。看起来你正在开始，没关系，但首先我强烈建议你检查这里给出的文档： http://foundation.zurb.com/docs/，它包括所有 foundation 5 控件的说明，特别是列的使用，这将帮助您在短短几天内完成许多设计，这些设计也是响应式的。祝你好运