3

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

<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>

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

4

2 回答 2

5

你可以试试：

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

或在您的样式表中：

 .columns {
  border: 10px solid #466d98;
  }
于 2013-10-06T14:40:43.580 回答
3
  1. 您缺少边框样式属性。
  2. 你打开一个<h2>标签，但关闭它</h1>
  3. 关闭你的<img>标签
  4. 写边框的更短的方法是border: 10px solid #466d98;.

固定标记看起来像这样。这是一个简短版本的边框。

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

于 2013-10-06T15:18:25.393 回答