如何在整个页面的部分内的每一行之后画一条线

Question

我有一个“当前项目”部分，我想在每个项目之后画一条线。水平规则无法在每个项目开始下的页面上画线。 附上代码

<section>
  <div class=" container-fluid">
    <div class="row">
      <div class="col-md-12 mb-1  py-4 text-center" style=" background: #2b2b2b;">
        <h3>Current Projects</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div>
          <div class="row">
            <div class="col-md-7">
              <p style="text-align: justify;"> Quisque pellentesque dolor in ante rhoncus hendrerit. Aenean luctus elit et enim bibendum facilisis. Quisque sed sem sodales, pellentesque metus ut, sodales enim. Cras mi arcu, egestas vitae velit nec, condimentum semper lectus. Nunc eget
                tortor nunc. Quisque sodales pellentesque dui sed cursus. Phasellus in dictum nunc. Curabitur in ullamcorper lacus, et fringilla tortor. Nam magna eros, volutpat vel gravida imperdiet, egestas a neque. Donec mattis dui quis mi accumsan consequat. Duis fringilla eleifend ante, hendrerit pretium felis iaculis sit amet. Aliquam bibendum, mi quis faucibus varius, sem ex accumsan ante, at blandit sapien ante at velit. Donec commodo vestibulum orci suscipit pellentesque. Sedornare enim et orci vestibulum tincidunt.</p>
  <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
            </div>
            <div class="col-md-5">
              <img src="img/car-german-2.jpeg" alt="" class="img-fluid">
            </div>
          </div>
        </div>
        <div>
          <div class="row"> // Here I have to draw a line..
            <div class="col-md-7">
              <p style="text-align: justify;"> Fusce blandit consequat auctor. Cras at est a dui ullamcorper semper. Aliquam faucibus bibendum est ut accumsan. Nullam varius tincidunt urna, eu facilisis eros aliquet a. In placerat facilisis neque vitae porta. Donec congue laoreet enimsit amet bibendum. Pellentesque dapibus eget sem eu aliquam. Etiam suscipit suscipit placerat. Sed ultrices nibh dui, in tristique tortor aliquam ultrices. Nam eleifend lorem dui, a viverra mi placerat in. In vehicula eget mi non condimentum.Aliquam quis congue urna, sed maximus sapien. </p>
              <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
            </div>
            <div class="col-md-5">
              <img src="img/laptop.png" alt="" class="img-fluid">
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

Answer 1

js，你可以这样做或者使用border-bottom css

<section>
  <div class=" container-fluid">
    <div class="row">
      <div class="col-md-12 mb-1  py-4 text-center" style=" background: #2b2b2b;">
        <h3>Current Projects</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div>
          <div class="row">
            <div class="col-md-7">
              <p style="text-align: justify;"> Quisque pellentesque dolor in ante rhoncus hendrerit. Aenean luctus elit et enim bibendum facilisis. Quisque sed sem sodales, pellentesque metus ut, sodales enim. Cras mi arcu, egestas vitae velit nec, condimentum semper lectus. Nunc eget
                tortor nunc. Quisque sodales pellentesque dui sed cursus. Phasellus in dictum nunc. Curabitur in ullamcorper lacus, et fringilla tortor. Nam magna eros, volutpat vel gravida imperdiet, egestas a neque. Donec mattis dui quis mi accumsan consequat. Duis fringilla eleifend ante, hendrerit pretium felis iaculis sit amet. Aliquam bibendum, mi quis faucibus varius, sem ex accumsan ante, at blandit sapien ante at velit. Donec commodo vestibulum orci suscipit pellentesque. Sedornare enim et orci vestibulum tincidunt.</p>
  <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
            </div>
            <div class="col-md-5">
              <img src="img/car-german-2.jpeg" alt="" class="img-fluid">
            </div>
          </div>
        </div>
        <hr/>
        <div>
          <div class="row"> // Here I have to draw a line..
            <div class="col-md-7">
              <p style="text-align: justify;"> Fusce blandit consequat auctor. Cras at est a dui ullamcorper semper. Aliquam faucibus bibendum est ut accumsan. Nullam varius tincidunt urna, eu facilisis eros aliquet a. In placerat facilisis neque vitae porta. Donec congue laoreet enimsit amet bibendum. Pellentesque dapibus eget sem eu aliquam. Etiam suscipit suscipit placerat. Sed ultrices nibh dui, in tristique tortor aliquam ultrices. Nam eleifend lorem dui, a viverra mi placerat in. In vehicula eget mi non condimentum.Aliquam quis congue urna, sed maximus sapien. </p>
              <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
            </div>
            <div class="col-md-5">
              <img src="img/laptop.png" alt="" class="img-fluid">
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

Answer 2

您可以在嵌套在一列内的每一行上使用 border-bottom 属性（根据您的 html 结构）

小提琴：https://jsfiddle.net/8zfhna25/

.col-md-12 .row {
  border-bottom: 2px solid orange;
}

<section>
  <div class=" container-fluid">
    <div class="row">
      <div class="col-md-12 mb-1  py-4 text-center" style=" background: #2b2b2b;">
        <h3>Current Projects</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div>
          <div class="row">
            <div class="col-md-7">
              <p style="text-align: justify;"> Quisque pellentesque dolor in ante rhoncus hendrerit. Aenean luctus elit et enim bibendum facilisis. Quisque sed sem sodales, pellentesque metus ut, sodales enim. Cras mi arcu, egestas vitae velit nec, condimentum semper lectus. Nunc eget
                tortor nunc. Quisque sodales pellentesque dui sed cursus. Phasellus in dictum nunc. Curabitur in ullamcorper lacus, et fringilla tortor. Nam magna eros, volutpat vel gravida imperdiet, egestas a neque. Donec mattis dui quis mi accumsan consequat. Duis fringilla eleifend ante, hendrerit pretium felis iaculis sit amet. Aliquam bibendum, mi quis faucibus varius, sem ex accumsan ante, at blandit sapien ante at velit. Donec commodo vestibulum orci suscipit pellentesque. Sedornare enim et orci vestibulum tincidunt.</p>
              <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
            </div>
            <div class="col-md-5">
              <img src="img/car-german-2.jpeg" alt="" class="img-fluid">
            </div>
          </div>
        </div>
        <div>
          <div class="row"> // Here I have to draw a line..
            <div class="col-md-7">
              <p style="text-align: justify;"> Fusce blandit consequat auctor. Cras at est a dui ullamcorper semper. Aliquam faucibus bibendum est ut accumsan. Nullam varius tincidunt urna, eu facilisis eros aliquet a. In placerat facilisis neque vitae porta. Donec congue laoreet enimsit amet bibendum. Pellentesque dapibus eget sem eu aliquam. Etiam suscipit suscipit placerat. Sed ultrices nibh dui, in tristique tortor aliquam ultrices. Nam eleifend lorem dui, a viverra mi placerat in. In vehicula eget mi non condimentum.Aliquam quis congue urna, sed maximus sapien. </p>
              <a href="about.html" class="btn btn-outline-danger btn-lg">Learn More</a>
            </div>
            <div class="col-md-5">
              <img src="img/laptop.png" alt="" class="img-fluid">
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

Answer 3

你可以
使用<hr>tag
要么
为每个部分使用边框底部样式