首页
前端开发
如何使 Navbar 和 Carousel 组合始终全屏
如何使 Navbar 和 Carousel 组合始终全屏
[英] How to make Navbar and Carousel combined always full screen
本文介绍了如何使 Navbar 和 Carousel 组合始终全屏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的页面顶部有一个导航栏.在此之下,我想要我的旋转木马,它应该始终占据整个剩余的屏幕.
这是我的导航栏:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span>按钮><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="/">首页</a><li class="nav-item"><a class="nav-link" href="/artworks">Artworks</a><li class="nav-item"><a class="nav-link" href="/collection">时尚收藏</a><li class="nav-item"><a class="nav-link" href="/blog">博客</a><li class="nav-item"><a class="nav-link" href="/about">关于我</a><li class="nav-item"><a class="nav-link" href="/contact">联系我</a><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></表单>
</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>进入我的作品...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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>进入我的时装系列...</h1><p>Lorem ipsum dolor sat amet </p>
</a>
<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>进入我的博客...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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>阅读一些关于我的资料...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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>联系我...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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">以前的</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">下一步</span></a>
这些片段或多或少直接来自引导程序网站.这些只是为了我的目的而调整的.那么如何让旋转木马占据导航栏下方的整个屏幕呢?有任何想法吗?
解决方案
添加这个 css
.carousel { height: calc(100vh - 56px);}.carousel-inner,.carousel-item { 高度:100%;}.carousel-item { 背景颜色:#000;}.carousel-item img { 高度:100%;适合对象:覆盖;对象位置:居中;}
<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导航"><span class="navbar-toggler-icon"></span>按钮><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="/">首页</a><li class="nav-item"><a class="nav-link" href="/artworks">Artworks</a><li class="nav-item"><a class="nav-link" href="/collection">时尚收藏</a><li class="nav-item"><a class="nav-link" href="/blog">博客</a><li class="nav-item"><a class="nav-link" href="/about">关于我</a><li class="nav-item"><a class="nav-link" href="/contact">联系我</a><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></表单>
</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>进入我的作品...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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>进入我的时装系列...</h1><p>Lorem ipsum dolor sat amet </p>
</a>
<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>进入我的博客...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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>阅读一些关于我的资料...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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>联系我...</h1><p>Lorem ipsum dolor sat amet</p>
</a>
<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">以前的</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">下一步</span></a>
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.
This is my navbar:
<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>
and this is my carousel:
<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?
解决方案
Add this 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屋!
查看全文