Question

我得到了一个具有透明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;
}

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

因此，我的问题是：在<header>部分内添加诸如卡片，巨型机等元素的有效方法是什么？

Answer 1

就像其他任何部分一样。只需将元素添加到html代码中，然后在css文件中进行样式设置即可。

Answer 2

只需给您的卡起一个类名即可。然后，使用css选择器找到您的类并为其添加一些样式。否则，您可以为b卡使用boostrap-vue属性，并为其设置样式。

https://bootstrap-vue.js.org/docs/components/card

所以而不是...

<b-card>
 Test
</b-card>

使用道具，从上面的链接...

<b-card
 title="Card Title"
 img-src="https://picsum.photos/600/300/?image=25"
 img-alt="Image"
 img-top
 tag="article"
 style="max-width: 20rem;"
 class="mb-2">
<b-card-text>
  Some quick example text to build on the card title and make up the bulk of the card's content.
</b-card-text>

<b-button href="#" variant="primary">Go somewhere</b-button>

标题内的中心元素与背景

2 个答案: