Question

我正在使用Bootstrap 4开发一个主页，其中仅包含固定底部样式的导航栏和其上方的转盘。

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

在移动视图上，轮播和我要摆脱的导航之间有一个空白。我怎样才能做到这一点？

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

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

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

在这件事上需要您的帮助，谢谢。

Answer 1

用position-relative类将整个导航和轮播包装在一个部门中。并给您的导航position-absolute类。

https://jsfiddle.net/y1fwv04d/

Answer 2

我对此问题的解决方案是将幻灯片放映中的图像用作background image中每个图像的carousel-item。

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>

Working Fiddle Link

Answer 3

像这样吗？

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

抱歉，我无法编写太多完整的代码，我是通过手机编写的。但我希望这就是您要寻找的。

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

3 个答案: