如何使Navbar和Carousel始终保持全屏显示 [英] How to make Navbar and Carousel combined always full screen
本文介绍了如何使Navbar和Carousel始终保持全屏显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在页面顶部显示一个导航栏.在此之下，我希望我的旋转木马应该始终占据整个剩余的屏幕.
I want to have a nav-bar at the top of my page. Below that I want my carousel which should always take up the entire remaining screen.
这是我的导航栏:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/artworks">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/collection">Fashion Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
</a>
</form>
</div>
</nav>
这是我的旋转木马:
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/artworks">
<div class="carousel-caption d-none d-md-block carousel-title ">
<h1>Get to my artworks...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/collection">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my fashion collection...</h1>
<p>Lorem ipsum dolor sit amet </p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/blog">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my blog...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/about">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Read some stuff about me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/contact">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Contact me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这些摘录或多或少直接来自引导网站.这些只是为了我的目的进行了调整.那么，如何使轮播占据导航栏下方的整个屏幕呢?有任何想法吗?
More or less these snippets are directly taken from the bootstrap website. Those are just adjusted for my purposes. So how do I make the carousel take up the entire screen below the nav-bar? Any ideas?
推荐答案
添加此CSS
.carousel { height: calc(100vh - 56px);}
.carousel-inner,.carousel-item { height: 100%;}
.carousel-item { background-color: #000;}
.carousel-item img { height: 100%; object-fit: cover; object-position: center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/artworks">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/collection">Fashion Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
</a>
</form>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/artworks">
<div class="carousel-caption d-none d-md-block carousel-title ">
<h1>Get to my artworks...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/collection">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my fashion collection...</h1>
<p>Lorem ipsum dolor sit amet </p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/blog">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my blog...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/about">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Read some stuff about me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/contact">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Contact me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这篇关于如何使Navbar和Carousel始终保持全屏显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
