行

行和列

简单地说，Row元素向页面添加了一行(我们知道这很令人震惊)。要添加行元素，只需搜索“Row”并将其拖到画布上。控件的此部分允许您设置列除了布局在检查器的前两个控件中:

这里要做的一个重要区别是Column元素之间的区别- - - - - -它是行元素的直接子元素- - - - - -而且”列布局”你的排。“列”是在Row中添加任意数量的物理列，而“布局”确定在Row布局的特定位置上每个列的宽度百分比。列数不受行布局的限制。例如，你可能希望在一行中有6个列元素，并将它们平均布局在33.33%。在这个场景中，列4-6将在视觉上出现在新行上，但仍然在同一行中。

让我们以上面的例子为例，看看如何在新Row中实现这一点。你要做的第一件事就是相加6列排:

接下来，我们将设置当前正在处理的断点的布局(在本例中，我们将从XL断点)。有多种常见的预设配置可供选择，如50% / 50%，33.33% / 66.66%，等等。在这个场景中，因为我们想要我们的布局有3个相等的列，我们可以选择下面的选项:

这将创建以下输出(列元素已被样式化，使其更容易可视化):

修改布局

您可能已经注意到，当鼠标悬停在Row上时，它有一些不同之处:在Row的垂直间隙中出现了一条微弱的虚线。这些是可以在实时预览中抓取的句柄，以水平调整相邻列之间的布局大小。虚线只是在悬停时出现的一个指示器，但整个间隙都可以拖动。向下点击任何垂直空白将显示以下反馈:

当前与之交互的活动句柄将突出显示在每个列上方的工具提示之外，显示它们的当前宽度。当您开始拖动手柄时，布局将实时更新，工具提示也将相应地更新。此外，如果你回到检查器，你会发现之前预设的列布局将被更改为“自定义布局”，反映了在预览中拖动手柄所做的更改:

可以使用“Layout”控件左侧的选项卡对每个断点重复此过程。扩展我们上面的例子，我们可能希望我们的6列响应到a50% / 50%LG和MD断点上的布局，然后继续100％在SM而且XS。

要记住的一个非常独特的布局技巧是列宽度设置使用flex-basis因为Row是由flexbox驱动的。正因为如此，如果你设置了相同的自定义固定(如价值。200 px，20眼动，等等)对于每个断点，那么列的响应不是通过断点，而是通过确保它们自己的宽度永远不会低于该固定值(如果可能的话)。这对于你想要定义一堆特定元素的布局非常有用max-width把它们包好就行了。同样，要做到这一点，你只需要在每个断点设置一个固定的值，使用自定义布局输入，如下所示:

关于“Layout”控件的最后一个有趣的信息是，它将自动将活动选项卡切换到您当前在构建器中查看的断点。当然，您可以在任何时候切换到您希望样式化的任何断点，但这有助于确保您从最有可能要更新的断点开始工作。

设置和间隙

设置了Row的一般布局后，您将在控件中发现更有用的控件“设置”对照组:

我们可以执行许多常见的任务，如设置基地字体大小或者一个背景颜色，但你也会发现，改进后的Row有很多有用的改进。

可能最有帮助的是差距控制。Row的前一个版本设置了水平间隔，根本没有设置垂直间隔的方法，通常需要用户求助于在多个断点或自定义CSS中显示/隐藏的间隔。现在，您可以快速、轻松地在本地指定这些值，从而使Row在其自身的Columns内部留出空间。请记住，直到Row的布局改变，使列堆叠在另一个上面，您才会看到任何垂直的间隙。

对齐

的对齐控件是一个令人难以置信的强大的部分布局列在你的行，因为我们有灵活的潜力去挖掘。这可以让我们实现各种独特的布局，不可能在传统的建设者网格系统。例如，让我们从前面的33.33% / 33.33% / 33.33%的布局中删除一列。默认情况下，使用水平对齐控件设置为开始,你的布局应该是这样的:

由于我们有额外的水平空间来分配列在行所占用的空间中，如果我们调整水平对齐控件我们仍然开始看到不同的布局结果出现:

---

---

---

---

此外，如果我们的列高度不同，我们可以使用垂直对齐控件在各自的行中分布列的位置(注意，对于下面的所有示例，我们使用了一个看不见的间隔来实现这些列的不同高度):

---

---

---

逆转与成长

最后一个需要注意的Row专用控件是反向而且成长复选框。从Reverse开始，让我们来看看下面的排序内容:

注意这些数字是如何从左到右显示的，就像它们在使用LTR文本方向性的网站上一样。如果我们打开反向复选框，将导致以下结果:

使用反向功能可以有效地反映内容的外观水平。注意这一点很重要，因为它对订单(例如5不会出现在1的位置，等等)。

使用这个复选框是最有效的情况下，你可能有交替的部分内容在桌面上(例如。图片/文字然后文字/图像)，但在移动设备上，你希望它们都以文本或图像在顶部统一显示。因为反向只改变我们的行的水平外观，你可以使用反向的每个其他部分与此模式，它将自动响应你想要它在移动设备上显示的方式。不再隐藏/显示多个行和列来实现这个特定的布局!

此外,成长复选框将强制任何列在可能的情况下填充所有可用空间:

这只是一种风格上的选择，在某些情况下，即使你没有偶数个可用的列，你也可能希望有一个平方的Row内容。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。
• 循环器提供者和消费者 - - - - - -使用这些控件来访问您的WordPress安装中的信息，并使用我们的构建器中的元素将其输出到您的网站前端。点击在这里获取更多信息。

视频教程

演示

要查看行元素的现场演示，请单击在这里．

总结

总之，我们已经讨论了行元素。我们已经讨论了Row Element是在Cornerstone中为页面添加行的简单工具，我们已经学习了如何更改它的内容、设计和各种Row设置。