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

您错过了 border-style 属性。
您打开<h2>标记，但请使用</h1>
关闭您的<img>代码
编写边框的简短方法是border: 10px solid #466d98;。

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

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

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

2 个答案: