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

Question

我想要一个边框底部，它可以控制容器右侧的宽度。所以我有两个六列 col-md-6。右一有一篇小时候的文章。那篇文章的边框底部为 1 像素。那应该到达窗口视口(viewport)。见下图:

如您所见，右侧的垂直线将显示容器端。应该停止内容并让文本例如位于新行上。但是边界应该否决它，这样它就会正确到达视口(viewport)。

哦，如果不清楚的话，我会使用 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