html - 如何覆盖右边的引导容器？

我想有一个边框底部，该边框覆盖了右边的容器宽度。所以我有两个列，每个列的六个col-md-6。右边的人在孩提时代有一篇文章。该文章的底边为1像素。那应该到达正确的窗口视口。看下面的图片：



如您所见，右边的垂直线将显示容器的末端。此处应停止内容，并让文本位于新行中。但是边界应否决该规则，以便它将正确地到达视口。

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

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

最佳答案

边界不能超出其要素。

但是您可以改用伪元素；像这样

.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

关于html - 如何覆盖右边的引导容器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33327752/