我有一个带导航栏的页面. 我想在页面中添加响应式背景图像(而不是导航栏). 如果我将页面设置为100％高度,则会使用滚动条溢出页面. 该如何实现？我不知道. .bg { /* The image used */ back
我想在页面中添加响应式背景图像(而不是导航栏).
如果我将页面设置为100％高度,则会使用滚动条溢出页面.
该如何实现？我不知道.
.bg {
/* The image used */
background-image: url("http://via.placeholder.com/350x150");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page">
<div class="bg"></div>
<div class="data">
bla bla bla
</div>
</div>
编辑：jsfiddle – JSFIDDLE
您可以使用Bootstrap 4 flexbox utils,并将flex：1 1 auto添加到主页,使其填充高度(不滚动).https://www.codeply.com/go/isN2cS0m0q
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="http://img.558idc.com/uploadfile/allimg/210612/1252555M2-0.jpg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="http://img.558idc.com/uploadfile/allimg/210612/1252556433-2.jpg"></script>
<style>
body {
min-height: 100vh;
}
.flex-fill {
flex: 1 1 auto;
}
.bg {
background-image: url("http://placehold.it/350x150");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page d-flex flex-column flex-fill">
<div class="bg flex-fill"></div>
<div class="data">
bla bla bla
</div>
</div>
</body>
注意：flex-fill类将为included in Bootstrap 4.1,因此在发布4.1时将不再需要用于flex-fill的额外CSS.
相关问题：
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4: How to make the row stretch remaining height?