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 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> 태그를 열고,하지만 border: 10px solid #466d98;하게 될 <img> 태그
3. 닫습니다 </h1>
4. 와 국경을 쓰는 짧은 방법을 닫습니다.

수정 된 마크 업은 that입니다. 국경의 짧은 버전이있는 here's입니다.

다른 CSS/마크 업 문제로 인해 코드에서 작동하지 않을 수 있습니다 (예 : 요소에 display: table-row;이 적용되지 않는 경우).