内容和固定底部导航之间的空间

我正在开发带有bootstrap 4的主页，该页面仅包含一个带有固定底样式的导航栏和上方的旋转木马。

桌面/平板电脑上的外观还可以，但是问题在移动视图上。

在移动视图上，旋转木马和我想摆脱的导航之间有一个白空间。我该如何实现？

我已经尝试过，但是它没有起作用。

@media only screen and (max-width: 576px) {body {overflow: hidden;}

这是我的小提琴：https://jsfiddle.net/wb13o8nv/13/

请在此问题上需要您的帮助，谢谢。

用position-relative类包装整个导航和旋转木马。并给您的NAV一个position-absolute类。

https://jsfiddle.net/y1fwv04d/

我对此问题的解决方案是将幻灯片中的图像显示为每个carousel-item的background image。

CSS

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.sliderCarousel {
  width: 100%;
}
.sliderCarousel .carousel-item {
  width: 100%;
  background-position: center;
  background-size: cover;
}

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Website Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#collapsibleNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </nav>
    <div
      id="carouselExampleIndicators"
      class="carousel slide sliderCarousel"
      data-ride="carousel"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner h-100">
        <div
          class="carousel-item h-100 active"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
        <div
          class="carousel-item h-100"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
        <div
          class="carousel-item h-100"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        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="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde
          deserunt dolores cum optio sed exercitationem dolore rerum
          consectetur, voluptatibus nemo molestias laudantium ea, soluta ab iste
          voluptates veritatis quos dignissimos?
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

javascript

$(document).ready(function() {
  var setCarouselHeight = function() {
    $(".sliderCarousel").height(document.documentElement.clientHeight);
  };
  setCarouselHeight();
  $(window).resize(function() {
    setCarouselHeight();
  });
});

在这里，我正在使用JS来计算视口的高度并设置旋转频率的高度。

$(document).ready(function() {
  var setCarouselHeight = function() {
    $(".sliderCarousel").height(document.documentElement.clientHeight);
  };
  setCarouselHeight();
  $(window).resize(function() {
    setCarouselHeight();
  });
});

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.sliderCarousel {
  width: 100%;
}
.sliderCarousel .carousel-item {
  width: 100%;
  background-position: center;
  background-size: cover;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 4 Website Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#collapsibleNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </nav>
    <div
      id="carouselExampleIndicators"
      class="carousel slide sliderCarousel"
      data-ride="carousel"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner h-100">
        <div
          class="carousel-item h-100 active"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
        <div
          class="carousel-item h-100"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
        <div
          class="carousel-item h-100"
          style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
        ></div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        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="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde
          deserunt dolores cum optio sed exercitationem dolore rerum
          consectetur, voluptatibus nemo molestias laudantium ea, soluta ab iste
          voluptates veritatis quos dignissimos?
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

工作小提琴链接

类似的东西？

<div class="min-vh-100 overflow-hidden">
      Carousel here
      <img class="d-block h-100" src="https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" alt="Second slide">
    </div>
    <footer class="sticky-bottom">Your nav here</footer>

对不起，我不能编写太多完整的代码，我正在用手机写这篇文章。但我希望这就是您要寻找的。

相关内容

最新更新

热门标签：