【发布时间】：2020-05-17 22:56:58
【问题描述】：
所以我有 3 个问题：
- navbar-brand 区域之后的导航栏内容由于某种原因不会显示。我正在尝试添加一个主页按钮，关于带有下拉菜单的部分，其中包含：“我们的使命”、“我们的团队”、“常见问题解答”；联系按钮等（参见图片以供参考）
- 我的卡片页脚中的图标不会出现
-
如何让卡片的灰色部分变成透明的灰色，同时显示主体背景？
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="app3.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>Quarantine Blog</title> </head> <body> <nav class="navbar bg-dark navbar-dark"> <div class="container"> <a href="" class="navbar-brand">Quarantine Pal</a> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <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="#">Link</a> </li> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="">Home</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Our Mission</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Our Team</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">FAQ</a> </div> <li><a href="">Contact</a></li> <li><a href="">Our Founder</a></li> <li><a href="">Press</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up <i class="fa fa-user-plus"></i></a></li> <li><a href="#">Login <i class="fa fa-user"></i></a></li> </li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> <section id="header" class="jumbotron text-center"> <h1 class="display-3">Quarantine State of Mind</h1> <p class="lead">Exploring the 'New Normal'</p> <a href="" class="btn btn-primary">Sign Up</a> <a href="" class="btn btn-success">Login</a> </section> <div class="container"> <div class="card-deck"> <div class="card"> <img src="https://images.unsplash.com/photo-1588776409240-05d32e7614f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Sailor Moon"> <div class="card-body"> <h5 class="card-title text-center">Self-Care and Burn Out</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <div class="card-footer"> <a href="" class="btn btn-outline btn-success btn-sm">Download</a> <a href="" class="btn btn-outline btn-danger btn-sm"><i class="far fa-heart"></i></a> </div> </div> <div class="card"> <img src="https://images.unsplash.com/photo-1588779851655-558c2897779d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Inuyasha"> <div class="card-body"> <h5 class="card-title text-center">Help Fight Coronavirus</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <div class="card-footer"> <a href="" class="btn btn-outline btn-success btn-sm">Download</a> <a href="" class="btn btn-outline btn-danger btn-sm"><i class="far fa-heart"></i></a> </div> </div> <div class="card"> <img src="https://images.unsplash.com/photo-1588777308282-b3dd5ce9fb67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Dragon Ball Z"> <div class="card-body"> <h5 class="card-title text-center">Pandemic Socializing</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <div class="card-footer"> <a href="" class="btn btn-outline btn-success btn-sm">Download</a> <a href="" class="btn btn-outline btn-danger btn-sm"><i class="far fa-heart"></i></a> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
CSS：
#header {
background-color: transparent;
background-position: center bottom;
}
h1 {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-brand {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar.bg-dark.navbar-dark {
background-color: transparent !important;
}
body {
background-image: url('https://images.unsplash.com/photo-1588774210246-a1dc467758df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80')
}
.card-body {
font-family: 'Source Sans Pro',
}
.lead {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.card-body {
background-color: gray;
opacity: 80%;
}
.card-title {
color: white;
font-family: 'Source Sans Pro', sans-serif;
}
.card-text {
color: white;
font-family: 'Source Sans Pro', sans-serif;
}
【问题讨论】：
-
最好一次发布1个问题或问题。
标签： html css bootstrap-4