Пожалуйста, смотрите следующий код. Я просто хочу центрировать контент с помощью нижнего колонтитула внизу, который находится внутри фонового изображения обложки. Я пытался сделать это с контейнерами Bootstrap4, а также с конфигурациями d-flex, и все это было ужасным провалом. (
В настоящее время я использую два столбца, которые расположены друг над другом, но это не работает, когда вы уменьшаете экран по высоте. Я надеюсь на правильный способ сделать это, фактически центрируя контент по всему экрану, сохраняя нижний колонтитул.
Также см. Здесь для рабочего демо: https://jsfiddle.net/m05heusn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>t-rex</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- bootstrap4 css should load first to be available globally -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" integrity="sha384-vGq6VlJ/rGDK5hwCZhgtrb5j4nOanwgWgBSe9anrJGQHqCgkBo45u6lAxlVR0U+Q"
crossorigin="anonymous"></script>
<style>
html,
body {
font-family: 'Josefin Sans', sans-serif;
height: 100%;
}
#cover {
background-attachment: scroll;
background-image: url('http://source.unsplash.com/9euUL1nE9aA/1920x1080');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=xyz"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'xyz');
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light afixed-top py-4">
<div class="container">
<a class="navbar-brand" href="#">
t-rex
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div> <!-- navMenu -->
</div> <!-- container -->
</nav>
<div id="cover" class="h-100">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-12 align-self-center text-center">
<div class="display-1 d-none d-sm-block">
t-rex
</div>
<div class="display-3 d-block d-sm-none">
t-rex
</div>
</div>
<div class="col-12 align-self-end p-2">
<div class="d-none d-sm-block text-right">
Copyright © 2018 t-rex. All rights reserved.
</div>
<div class="small d-block d-sm-none text-center">
Copyright © 2018 t-rex. All rights reserved.
</div>
</div>
</div>
</div>
</div>
<!-- cover
<script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT "
crossorigin="anonymous "></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
crossorigin="anonymous "></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
crossorigin="anonymous "></script>
</body>
</html>