如何向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;邊框將無法應用）。