Question

我正在尝试使用引导程序3创建一个类似this的效果，白线和圆圈沿着单页布局的中心向下运行。

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

<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>内的任何位置，最好是作为直接孩子。

干杯！

将中心线添加到引导网格，而不会干扰现有布局

1 个答案: