当我切换到小型设备时，我的 div 内容与下一个 div 内容重叠

Question

我正在使用 bootstrap，当我切换到小型设备时，我的内容与下一个 div 重叠。我试图改变一切，并在我的 div 底部放置边距，但似乎没有任何效果。我错过了什么。我不确定它是否与我尝试添加的相关药水有关，所以我可以在每个 div.

的底部添加我的 svgs

HTML

<div class="container-fluid  vh-100 " id="projects">
  <!-- <div class="container d-flex h-100 " id="pwrap"> -->
    <div class="row align-items-center mx-auto " id="cards">
      <div class="col-sm-6 col-lg-4 ">
        <div class="card" >
          <img src="pics/project1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class=" col-sm-6 col-lg-4  ">
        <div class="card" >
          <img src="pics/project1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-lg-4  ">
        <div class="card">
          <img src="pics/project1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
    <svg class="botp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#FFB9B9" fill-opacity="1" d="M0,192L48,165.3C96,139,192,85,288,96C384,107,480,181,576,218.7C672,256,768,256,864,245.3C960,235,1056,213,1152,218.7C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
  <!-- </div> -->
</div>

<!-- /projects -->

<!-- contact -->

<div class="container-fluid  w-100 vh-100 my-auto  d-flex justify-content-center align-items-center " id="contact">
  <!--Section: Contact v.2-->

  <div id="border-shadow">

<div class="border border-success p-3" id="bordercustom">

    <section class="mb-4 " id="formcustom">

      <!--Section heading-->
      <h2 class="h1-responsive font-weight-bold text-center my-4">Contact Me</h2>

      <div class="row justify-content-center">

          <!--Grid column-->
          <div class="col-md-9 mb-md-0 mb-5">
              <form id="contact-form" name="contact-form" action="mail.php" method="POST">

                  <!--Grid row-->
                  <div class="row">

                      <!--Grid column-->
                      <div class="col-md-6">
                          <div class="md-form mb-0">
                              <input type="text" id="name" name="name" class="form-control">
                              <label for="name" class="">Your name</label>
                          </div>
                      </div>
                      <!--Grid column-->

                      <!--Grid column-->
                      <div class="col-md-6">
                          <div class="md-form mb-0">
                              <input type="text" id="email" name="email" class="form-control">
                              <label for="email" class="">Your email</label>
                          </div>
                      </div>
                      <!--Grid column-->

                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row">
                      <div class="col-md-12">
                          <div class="md-form mb-0">
                              <input type="text" id="subject" name="subject" class="form-control">
                              <label for="subject" class="">Subject</label>
                          </div>
                      </div>
                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row">

                      <!--Grid column-->
                      <div class="col-md-12">

                          <div class="md-form">
                              <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                              <label for="message">Your message</label>
                          </div>

                      </div>
                  </div>
                  <!--Grid row-->

              </form>

              <div class="text-center text-md-left d-flex justify-content-center">
                <a class="button mt-3" onclick="validateForm();">
    <span class="default">Send</span>
    <span class="success">Sent</span>
    <div class="left"></div>
    <div class="right"></div>
</a>

              </div>
              <div class="status"></div>
          </div>
          <!--Grid column-->



        </div>
      </div>

  </section>
  <!--Section: Contact v.2-->

</div>
<svg class="botc"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#363C62" fill-opacity="1" d="M0,288L60,272C120,256,240,224,360,224C480,224,600,256,720,277.3C840,299,960,309,1080,293.3C1200,277,1320,235,1380,213.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
</div>


<!-- /contact -->

和我的css

#home,
#about,
#projects,
#contact{
  position: relative;
}

 #projects .botp{
   z-index: 1;
   position: absolute;
   bottom: 0;
   left:0;
 }
 #cards{
   z-index: 2;
 }
 #contact .botc{
   position: absolute;
   bottom: 0;
   left:0;
 }

Answer 1

您使用的是什么浏览器？我有运行你的代码，它没有重叠（我正在使用 Opera/Google Chrome）。

此外，您可以将 height: auto 添加到分区 div，这可能会有所帮助:)

编辑：

(终于明白你的意思了)

只是玩 z-index。这是代码：

CSS

#home,
#about,
#projects,
#contact {
  position: relative;
}

 #projects .botp {
   z-index: 1;
   bottom: 0;
   left: 0;
   position: absolute;
 }

 #contact {
     z-index: 10;
 }

 #projects {
     z-index: 10;
 }

.botc{
   position: absolute;
   z-index: 1;
   left: 0;
   bottom: 200px;
 }

 #card-text {
     z-index: 10000;
 }

.botp {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 500px;
     z-index: 1;
 }

 .col-md-6 {
     z-index: 10;
 }

index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container-fluid  vh-100 " id="projects">
        <!-- <div class="container d-flex h-100 " id="pwrap"> -->
        <div class="row align-items-center mx-auto " id="cards">
            <div class="col-sm-6 col-lg-4 ">
                <div class="card">
                    <img src="pics/project1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4">
                <div class="card">
                    <img src="pics/project1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4">
                <div class="card">
                    <img src="pics/project1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title" style="z-index: 10;">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <svg class="botp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#FFB9B9" fill-opacity="1"
            d="M0,192L48,165.3C96,139,192,85,288,96C384,107,480,181,576,218.7C672,256,768,256,864,245.3C960,235,1056,213,1152,218.7C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        </path>
    </svg>
        <!-- </div> -->
    

    <!-- /projects -->

    <!-- contact -->

    <div class="container-fluid  w-100 vh-100 my-auto  d-flex justify-content-center align-items-center " id="contact">
        <!--Section: Contact v.2-->

        <div id="border-shadow">

            <div class="border border-success p-3" id="bordercustom">

                <section class="mb-4 " id="formcustom">

                    <!--Section heading-->
                    <h2 class="h1-responsive font-weight-bold text-center my-4">Contact Me</h2>

                    <div class="row justify-content-center">

                        <!--Grid column-->
                        <div class="col-md-9 mb-md-0 mb-5">
                            <form id="contact-form" name="contact-form" action="mail.php" method="POST">

                                <!--Grid row-->
                                <div class="row">

                                    <!--Grid column-->
                                    <div class="col-md-6">
                                        <div class="md-form mb-0">
                                            <input type="text" id="name" name="name" class="form-control">
                                            <label for="name" class="">Your name</label>
                                        </div>
                                    </div>
                                    <!--Grid column-->

                                    <!--Grid column-->
                                    <div class="col-md-6">
                                        <div class="md-form mb-0">
                                            <input type="text" id="email" name="email" class="form-control">
                                            <label for="email" class="">Your email</label>
                                        </div>
                                    </div>
                                    <!--Grid column-->

                                </div>
                                <!--Grid row-->

                                <!--Grid row-->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="md-form mb-0">
                                            <input type="text" id="subject" name="subject" class="form-control">
                                            <label for="subject" class="">Subject</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Grid row-->

                                <!--Grid row-->
                                <div class="row">

                                    <!--Grid column-->
                                    <div class="col-md-12">

                                        <div class="md-form">
                                            <textarea type="text" id="message" name="message" rows="2"
                                                class="form-control md-textarea"></textarea>
                                            <label for="message">Your message</label>
                                        </div>

                                    </div>
                                </div>
                                <!--Grid row-->

                            </form>

                            <div class="text-center text-md-left d-flex justify-content-center">
                                <a class="button mt-3" onclick="validateForm();">
                                    <span class="default">Send</span>
                                    <span class="success">Sent</span>
                                    <div class="left"></div>
                                    <div class="right"></div>
                                </a>

                            </div>
                            <div class="status"></div>
                        </div>
                        <!--Grid column-->



                    </div>
            </div>

            </section>
            <!--Section: Contact v.2-->

        </div>
        
    </div>


    <!-- /contact -->
    <svg class="botc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#363C62" fill-opacity="1"
            d="M0,288L60,272C120,256,240,224,360,224C480,224,600,256,720,277.3C840,299,960,309,1080,293.3C1200,277,1320,235,1380,213.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
        </path>
    </svg>
</body>

</html>

希望对您有所帮助:)

Answer 2

所以我只是通过在 css

上添加这段代码来随机修复它

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

当我切换到小型设备时，我的 div 内容与下一个 div 内容重叠

My div content gets overlapped by the next div when i switch to small devices

html

css

overlap

bootstrap-5

overlapping

编辑：