html - Bootstrap v 3.2 跨多列的边框

Question

我正在努力坚持 container > row > column 的 Bootstrap 设计范式，但不可否认我对此很陌生并且对某些事情感到好奇。

如果我只将内容放在列中，就像我认为我应该做的那样，那么 Bootstrap 的 CSS 会在页面的左右边缘放置一个 15px 的间距(我知道它也会将它们放在不同的列之间.) 为了设计美学，我想在我的内容上方放置一个边框，并且我希望这样做不会让它进入排水沟空间。

Plunk included .如您所见，当我尝试为包含内容的同一元素设置样式时，它会导致 border-top 属性(在我的示例中为蓝色和绿色)进入两个间距。当我在内容上方创建一个新元素并为其赋予 margin-left, margin-right 值时，这似乎适用于边框的左边缘但不适用于右边缘(橙色我的例子)。我只希望边框与我的文本对齐。

实现此目标的最佳方法是什么？我可以更改元素本身的边距或填充，但我觉得我在搞乱 Bootstrap 的管道。

Answer 1

请检查这个plunk .我已将内容包装在 <div class="col-xs-8 opportunity-results"> 中用<p>标签，然后应用 border-top那个<p>标签。此外，我已经分配了 display: block 的属性到 <a>标签内 <div class="col-xs-4 new-search clear-all">然后应用 border-top那个<a>标签。

如果您只想在文本上方设置边框顶部，请检查此 plunk .

更新:

要使蓝色和绿色边框顶部都接触到，您可以使用 :after .opportunity-results 上的伪选择器像这样:

.opportunity-results:after {
     position: absolute;
     content: '';
     border-top: 1px solid blue;
     width: 100%;
     height: 2px;
     left: 15px;
     top: 0px;
}

这是 plunk 为之。