html - CSS 和 Bootstrap : Create a line that connects rows

Question

所以我创造了三个低点。每行有两个列，一个是文本，另一个是图像:

我想要创建的是一条连接图片的线，以红色突出显示:

我不知道该如何创建它。我可以将该行导出为 SVG 或 PNG，但我不知道如何对其进行编码才能像图片中那样工作。

这是 HTML 和 CSS:

<div class="container project-problemandsolution">
  <div class="row">
      <div class="col-lg-6 col-md-12 project-problem order-lg-1 order-2">
        <h3>The problem and the solution</h3>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem <br> <br>
        onumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

      </div>
      <div class="col-lg-6 col-md-12 project-solution order-lg-2 order-1">
          <img src="img/BubbleIllOne.svg" class="project-bubble" alt="Problem and Solution illustration">
      </div>
  </div>
</div>

<div class="container project-research">
  <div class="row">
      <div class="col-lg-6 col-md-12 project-solution order-lg-1 order-1">
          <img src="img/BubbleIllTwo.svg" class="project-bubble" alt="Research illustration">
      </div>
      <div class="col-lg-6 col-md-12 project-research order-lg-2 order-2">
        <h3>Research</h3>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem <br> <br>
        onumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

      </div>
  </div>
</div>

<div class="container project-lowfidelity">
    <div class="row">
        <div class="col-lg-6 col-md-12 project-problem order-lg-1 order-2">
          <h3>Low fidelity design</h3>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem <br> <br>
          onumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

        </div>
        <div class="col-lg-6 col-md-12 project-solution order-lg-2 order-1">
            <img src="img/BubbleTree.svg" class="project-bubble" alt="Low fidelity illustration">
        </div>
    </div>
  </div>

这是 CSS:

   .jumbotron {
    padding: 0;
    text-align: center;
}

.project-basic {
    padding-top: 10px;
    padding-bottom: 40px;
    text-align: center;
}

.project-basic-info {
    font-family: "Raleway Semibold";
}

@media only screen and (max-width: 992px) {
    .project-solution {
        text-align: center;
    }
    .project-solution img {
        text-align: center;
        width: 330px;
        height: 250px;
    }
}

@media only screen and (max-width: 360px) {
    .project-solution {
        text-align: center;
    }
    .project-solution img {
        text-align: center;
        width: 260px;
        height: 220px;
    }
}

.project-problemandsolution {
    margin-bottom: 50px;
}

.project-research {
    margin-bottom: 50px;
}

.project-lowfidelity {
    margin-bottom: 50px;
}


.project-buttons {
    margin-top: 40px;
    margin-bottom: 40px;
}

.project-bubble {
    width: 100%;
    height: 100%;
}

您可以在此处查看代码:https://jsfiddle.net/7uahbzgp/1/

附言线条对于小屏幕并不重要。它只需要在 xl 屏幕上显示连接。所以当你打开jsfiidle时，放大屏幕才能正确看到它。 如果您需要该行作为 svg:https://svgur.com/i/EbT.svg

Answer 1

所以我找到的唯一解决方案是 gorilla CSS，我在其中添加了一个带有线条图像的新容器:

<div class="container project-line">
  <div class="row">
    <img src="img/lineone.svg" alt="line">
  </div>
</div>

既然有两行，另外一行:

<div class="container project-line-two">
  <div class="row">
    <img src="img/linetwo.svg" alt="line">
  </div>
</div>

然后在 CSS 中:

.project-line {
    padding-left: 450px;
    margin-top: -64px;
    margin-bottom:-33px;
    z-index: -10;
}

.project-line-two {
    margin-top: -107px;
    padding-left: 201px;
    margin-bottom: -30px;
}

@media only screen and (max-width: 1200px) {
    .project-line {
        display: none;
    }
    .project-line-two {
        display: none;
    }
}