如何向Zurb基金会网格列添加边框？

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 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. 你缺少边框样式属性。
2. 你打开一个<h2>标签，但</h1>
3. 关闭它关闭<img>标签
4. 写边界更短的方式将border: 10px solid #466d98;。

固定标记看起来像that。和here's一个与短版的边界。

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