在不干扰现有布局的情况下向 bootstrap 网格添加一条中心线

Question

我正在尝试创建一种有点像 this 的效果，使用 bootstrap 3.

我认为最简单的方法是在整个布局下方添加一个 md-col-6 列运行，并带有右边框。然而，这显然不是我的页面需要布局以包含我的内容的方式，例如，一个元素是一个居中的图像。有没有一种方法可以在不干扰我现有的 bootstrap 网格布局的情况下响应地创建这种效果？理想情况下，如果有一种通用的方法可以做到这一点，可能会覆盖另一个网格（不确定是否可能），那就太好了。如果没有，这是我的布局示例：

<div class="container fullheight" >
  <div class="row text-center">
    <div class="col-sm-12">
      <h2>Title</h2>
      <h3 style="font-size:46px;">2012</h3>
    </div>
  </div>
  <div class="row width90">
    <div class="col-sm-5 col-md-7"></div>
    <div class="col-sm-7 col-md-5 right-fact">
      <h3>Tile</h3>
      <p>Description</p>
    </div>
  </div>
  <div class="row text-center"> <img src="Images/Image1.svg" alt="Image" height="450px"> </div>
  <div class="row width90">
    <div class="col-sm-7 col-md-5 left-fact">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
</div>
<!-- A few repeats to create a onepage website effect -->

Answer 1

这里是：

.middle-line {
  position: fixed;
  height: calc(80vh - 28px); 
  bottom: 0;
  width: 1px;
  left: 50%;
  
  background-color: black;
}
.middle-line:before {
  border: 5px solid black;
  
  width: 18px;
  height: 18px;

  display: block;
  content: '';
  bottom: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
}

<div class="middle-line"></div>

如果您想要另一种颜色，可以通过更改 CSS 中 black 的两个实例来随意更改线条和圆圈的颜色。例如，将其替换为 rgba(255,255,255,.85) 将使它们变成白色，不透明度为 85%。您还可以修改圆圈的大小和边框的宽度，直到您对结果满意为止。

不要忘记在您的页面中添加 html :)。它很小，但很重要。您可以将其放置在 <body> 内的任何位置，最好作为直接子项。

干杯！

在不干扰现有布局的情况下向 bootstrap 网格添加一条中心线

Add a centre Line to bootstrap grid, without interfering with existing layouts

html

css

twitter-bootstrap