Question

我正在建立一个索引页面，其内容仅包含图像轮播和固定的底部导航。

问题出在移动视图上，该视图导致不需要的空白轮播图像（图像响应）和导航之间。

这是我的导航代码：

<nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-bottom py-3" id="mainNav">
<div class="container">
  <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-dark navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto my-2 my-lg-0">
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="about.html">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="talent.html">Talent</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="schedule.html">Schedule</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</div>

这是我的轮播代码：

<div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">
  <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="img/andira_hd.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="img/gofar_hd.jpg" alt="Second slide">
        </div>
  </div>

我已经尝试过了，但是没有用。

@media（最大宽度：576像素）{ body {overflow-x：hidden！important;}}

我该如何解决？

移动视图上多余的空间

0 个答案: