如何覆盖右边的bootstrap容器？

Question

我想要一个边框底部，它将容器宽度推翻到右边。所以我有两个col-md-6的colomns。正确的一个孩子的文章。那篇文章有一个px的边界底部。这应该到达窗口视口右侧。见图像：

如您所见，右侧垂直线将显示容器端。应该停止内容并让文本例如在新行上定位。但边界应该否定它，以便它将到达视口右侧。

哦，如果不清楚，我会使用bootstrap网格！

正在执行的代码： http://codepen.io/anon/pen/gaewLB

Answer 1

边界不能超越其元素。

但你可以使用伪元素;像这样。

.page header,
.page article {
  padding: 60px 30px;
  /*border-bottom: 1px solid #c2c2c2; */
  position: relative; /* positioning context */
}
body {
  overflow-x: hidden; /* prevent scrollbars */
}
.page header::after,
.page article::after {
  content: '';
  position: absolute;
  top:100%;
  left: 0;
  height: 1px;
  background: #c2c2c2;
  width: 100vw; /* or some other large px/em value */
}

Codepen Demo