html - 带有背景的标题内的中心元素

问题描述

我得到了这个具有透明navbar和美丽背景图像的引导模板（我使用的是 bootstrap-vue，所以像这样的元素<b-container>只是已知引导结构的“快捷方式”：

<!DOCTYPE html>
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Home</title>
    <link rel="stylesheet" href="/site/themes/theme/css/theme.css">
</head>


<body class="flexible-layout">

<div id="app">
    <header style="background-image: url(/site/themes/theme/img/covers/cover-18.jpg)">
        <b-container>
            <div class="component-nav">
                <b-navbar type="dark" variant="dark" class="bg-transparent" fixed="top">
                    <b-navbar-nav>
                        <b-navbar-brand href="/" tag="h1" class="mb-0 logo">Hallowelt.io</b-navbar-brand>
                        <b-nav-item href="/">Home</b-nav-item>
                        <b-nav-item href="/about">About</b-nav-item>

                    </b-navbar-nav>
                </b-navbar>
            </div>


        </b-container>

        <b-container>
            <b-card>
                Test
            </b-card>
        </b-container>
    </header>
    <b-container class="content">
        <main role="main" class="container mt-4">
            <div class="hero">
                <b-jumbotron header="Test" lead="Test">
                    <p>Dies ist ein <strong>test</strong></p>

                </b-jumbotron>
            </div>
            <p>Dies ist ein Test</p>


        </main>
    </b-container>
    <footer class="pt-4">
        <div class="text-center py-3">© 2019
        </div>
    </footer>


</div>

<script src="/site/themes/theme/js/theme.js"></script>

</body>

</html>

这是我的自定义 CSS：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 75vh;
  background-size: cover;
}

.navbar {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  min-height: 75px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  font-weight: normal;
  font-size: large;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.navbar.bg-transparent{
  background-color: #343a40 !important;
  opacity: 0.6;
  filter: alpha(opacity=50) !important;
}

.navbar a {
  vertical-align: middle;
}

好的 - 现在我要存档的内容：我想在<header>: 中添加一些内容，可能是滑块之类的东西，或者只是一张简单的卡片。

我可以做这样的事情：

header .container {
  padding-top: 100px;
}

但我认为这不是正确的方法。

所以我的问题是：在部分内添加卡片、jumbotron 等元素的有效方法是什么<header>？

标签： htmlcsssassbootstrap-4

html - 带有背景的标题内的中心元素

问题描述

解决方案

推荐阅读