时间戳

首页 > 解决方案 > 如何在整个页面的部分内的每一行之后画一条线

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

问题描述

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

<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>

标签： javascripthtmlcssasp.net-core

解决方案

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>

推荐阅读