如何为 Zurb Foundation 网格列添加边框？

Question

我刚刚尝试为我的基础网格列添加边框，发现代码没有效果。已尝试寻找答案并实施替代技术，但由于某种原因没有任何效果。下面是我正在使用的代码（出于示例目的使用内联样式，实际代码中不存在！）。

<div class="large-4 columns" style="border-color: #466d98; border-width:10px;">
<h2 class="subheader"> Lorem Ipsum </h1>
<img src="img/cloud.png">
<p> consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor. Suspendisse potenti. Vivamus egestas vestibulum ante egestas adipiscing. In hac habitasse platea dictumst. Etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.</p>
</div>

我也尝试过这种方法（不给列本身加边框，而是在其中添加一个带边框的 div）：

<div class="large-4 columns">
<div style="border-color: #466d98; border-width:10px;">
<h2 class="subheader"> Lorem Ipsum </h1>
<img src="img/cloud.png">
<p> consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor. Suspendisse potenti. Vivamus egestas vestibulum ante egestas adipiscing. In hac habitasse platea dictumst. Etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.</p>
</div>
</div>

这两种方法都不起作用。我非常惊讶我在互联网上的任何地方都找不到解决方案，因为肯定有很多人想要有边框的列。希望这不是我忽略了一些非常简单的事情的情况。任何人都可以对此有所了解吗？谢谢。

Answer 1

你可以试试：

<div class="large-4 columns" style="border: 10px solid #466d98;">

或在您的样式表中：

 .columns {
  border: 10px solid #466d98;
  }

Answer 2

1. 您缺少 border-style 属性。
2. 您打开了一个<h2> 标签，但用</h1> 关闭它
3. 关闭你的<img>标签
4. 写边框的更短的方法是border: 10px solid #466d98;。

固定标记看起来像that。和here's 一个带有短版边框。

您可能有其他 CSS/标记问题导致它无法在您的代码中工作（例如，如果元素具有 display: table-row;，则不会应用边框）。