基础6：每行后得到一条水平线

Question

我正在使用由CSS flexbox提供支持的Foundation grid-x。

是否有一种小而简单直接的方式来使响应切片的行和列（每行的切片数量未知）具有可视分隔符（例如，旧的<hr>元素之间）每一行？我使用Foundation＆＃39; class="row" and class="column"来渲染响应式图块。

我尝试实现的目标基本上是这样的：Add a horizontal line separator on rows of wrapping items但是对基金会的Css或标记的攻击很少。

Answer 1

我能想到的最简单的解决方案是拥有一个具有坚实底边的css类：

.solid-border-bottom{border-bottom: 0.25rem solid gray;} 

在上面的代码中你可以改变厚度和颜色;根据您的需求

然后在任何div你想要<hr>效果你使用这个类，如：

<div class"columns solid-border-bottom">