求助：解决移动端Carousel与Contact Form容器重叠问题

嗨，我仔细看了你的代码，发现问题出在Carousel容器的固定高度设置以及一些结构小问题上，导致移动端布局重叠。咱们来一步步解决：

问题根源 #

1. 最外层的.container-fluid加了style="height: 50%;"，这个百分比高度在移动端视口下会强制容器占用一半屏幕高度，但下面的联系板块是流式布局，就会和Carousel容器重叠。
2. Carousel的carousel-control-next按钮位置写错了，它应该和carousel-control-prev同级，放在carousel-inner外面，不然会破坏Carousel的布局结构。

修改后的完整代码 #

<!-- 修复后的Carousel部分 -->
<div class="container-fluid margin-top-15">
  <div class="row">
    <div class="col-md-12 col-sm-12" style="background-color: #4EA2D2">
      <div id="carouselContent" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active text-center p-4">
            <p>第一个轮播文本内容</p>
          </div>
          <div class="carousel-item text-center p-4">
            <p>第二个轮播文本内容</p>
          </div>
        </div>
        <!-- 修正控制按钮的位置，移到carousel-inner外面 -->
        <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

<!-- 联系板块部分 -->
<div class="container margin-top-15">
  <div class="row">
    <div class="col-md-6 col-sm-12">
      <h4>Contactformulier</h4>
      <form>
        <div class="form-group">
          <label for="inputName">Naam</label>
          <input type="text" class="form-control form-control-sm" id="inputName" placeholder="Vul uw naam in">
        </div>
        <div class="form-group">
          <label for="inputSurname">Achternaam</label>
          <input type="text" class="form-control form-control-sm" id="inputSurname" placeholder="Vul uw achternaam in">
        </div>
        <div class="form-group">
          <label for="inputCompany">Bedrijf</label>
          <input type="text" class="form-control form-control-sm" id="inputCompany" placeholder="Vul uw bedrijfsnaam in">
        </div>
        <div class="form-group">
          <label for="inputEmail">Email</label>
          <input type="email" class="form-control form-control-sm" id="inputEmail" placeholder="Vul uw e-mail in">
        </div>
        <div class="form-group">
          <label for="inputPhone">Telefoonnummer</label>
          <input type="text" class="form-control form-control-sm" id="inputPhone" placeholder="Vul uw telefoonnummer in">
        </div>
        <div class="form-group">
          <label for="inputContact">Opmerking</label>
          <textarea class="form-control form-control-sm" id="inputContact" placeholder="Vul uw vraag of opmerking in"></textarea>
        </div>
        <button type="submit" class="btn btn-sm btn-primary">Versturen</button>
      </form>
    </div>
    <div class="col-md-6 col-sm-12">
      <h4>Contactgegevens</h4>
      <ul>
        <li>这里填你的联系信息，比如地址、电话等</li>
      </ul>
      <div id="map"></div>
    </div>
  </div>
</div>

关键改动说明 #

• 移除了.container-fluid的height:50%：让Carousel容器自适应内容高度，不再强制占用固定比例的视口高度，避免和下面的联系板块重叠。
• 修正了Carousel控制按钮的结构：把carousel-control-next移到carousel-inner外面，和prev按钮同级，保证Carousel的控制功能和布局正常。
• 调整了联系板块的容器间距：给联系板块的.container加上margin-top-15（和Carousel的顶部间距保持一致），确保两个区块之间有足够的空白，提升移动端的视觉体验。

这样修改后，在移动端访问时，Carousel会自适应内容高度，联系表单会正常显示在Carousel下方，不会再出现重叠问题啦！

内容的提问来源于stack exchange，提问作者Sander Bakker