Html 引导v3.2跨多个列的边框

我试图坚持

container>row>column

的引导设计范式，但我对这一点不太熟悉，对某些东西很好奇

如果我只是把内容放在列中，就像我认为我应该做的那样，那么Bootstrap的CSS会在页面的左边缘和右边缘放置一个15px的边沟（我知道它也会将它们放在不同的列之间）。为了设计美学，我想在我的内容上方放置一个边框，我想这样做，而不让它跑进排水沟

。如您所见，当我尝试为包含内容的相同元素设置样式时，它会导致

border top

属性（在我的示例中为蓝色和绿色）同时运行到两个水槽中。当我在内容上方创建一个新元素并使用

marginleft，marginright

值对其进行属性设置时，这似乎适用于边框的左边缘，但不适用于右边缘（在我的示例中为橙色）。我只希望边框与我的文本对齐

实现这一目标的最佳方式是什么？我可以更改元素本身的边距或填充，但是我感觉我在搞乱引导程序的管道。

请检查这个。我用一个

标记将内容包装在
中，然后将一个
边框顶部
应用于该
标记。此外，我已将
display:block
的属性指定给

更新：

要使蓝色和绿色边框都位于顶部，可以使用
上的
：after
psuedo选择器。opportunity results
如下所示：

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

这是它的。
谢谢。你的两次猛击都可以使边界远离边缘的排水沟。在让蓝线和绿线同时接触的同时，是否还有其他方法可以做到这一点？