作为学习 Web 开发 (#beginner) 的一部分,我目前正在构建一个以官方封面模板为基础的网站:https://getbootstrap.com/docs/4.0/examples/cover/。
我真的很喜欢演示的设计,但我无法在不修改导航栏设计的情况下使导航栏响应。
我查看了文档 (https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors),但经过多次尝试后,它始终摆脱了模板设计。
我的目标是在不丢失模板设计的情况下创建响应式导航栏(汉堡菜单)。
有人可以帮助网络开发学生解决这个问题吗? ?
提取我的 html 和 css 文件:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: linear-gradient(90deg,#0548f3 10%,#671ef4 110%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
color: #fff;
}
.cover-container {
max-width: 44em;
}
/*
* Header
*/
.masthead {
margin-bottom: 200px;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/* Styling curated list page */
.page-list{
margin-bottom: 100px;
}
/*
* Cover
*/
.cover {
padding: 30 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
}
.headline {
font-family: "Inter";
}
/* Cards styling */
.tools-cards {
background-color: #262626 ;
}
.btn-primary{
background-color: #0335ff;
border-color: #001be6 ;
}
.card-boxing{
padding: 10px 10px 10px 10px;
}
.card {
border-radius: 12px;
}
.card-badge {
position:absolute;
top:-10px;
left:-10px;
padding:5px;
background:#00d57c;
color:white;
border-radius: 12px;
}
.card-badge-paid {
position:absolute;
top:-10px;
left:-10px;
padding:5px;
background:#f3b005;
color:white;
border-radius: 12px;
}
/*
* Footer
*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="cover.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap" rel="stylesheet">
<title>Lorem ipsum dolor sit amet</title>
</head>
<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead ">
<div class="inner">
<h3 class="masthead-brand">Lorem ipsum </h3>
<nav class="nav nav-masthead justify-content-center navbar-expand-lg">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Page Number 1</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
<hr>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary ">Lorem ipsum </a>
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</footer>
</div>
</html>
在此先感谢您的帮助。 ?
最好,
马特