Question

我试图坚持container > row > column的Bootstrap设计范例，但我确实不熟悉这个并对某些东西感到好奇。

如果我只将内容放在列中，我相信我应该这样做，那么Bootstrap的CSS会在页面的左右边缘放置一个15px的装订线（I知道它也把它们放在不同的栏目之间。）对于设计美学我想在我的内容上面加上边框，我想这样做没有让它进入天沟空间。

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 。

Bootstrap v 3.2跨多个列的边框

1 个答案: