html - 为什么我的引导导航栏没有下降？
问题描述
为什么我的切换菜单不下拉有一个实心黑框？它只是在透明的中心下降。如何修复它，使其作为实心块下降并位于左侧？我正在使用引导导航栏，并使用外部 CSS 对其进行了编辑。我试图找出如何解决它，但我无法找到答案。我对 HTML、CSS 和 Javascript 非常陌生，我不确定我是否能准确地解释问题以获得谷歌的答案。希望这里有人知道我的意思，谢谢。我的 CSS：
.navbar {
background-color: black;
height: 15%;
line-height: 280px;
}
li {
padding-right: 10px;
padding-left: 10px;
}
.collapse {
display: flex;
justify-content: center;
text-align: center;
}
.nav-link {
color: white !important;
font-weight: bold;
font-size: 120%;
font-style: italic
}
.poetry-monkey-logo-center {
height: 15px;
}
.poetry-monkey-logo-center>img {
height: 120px;
width: 130px;
border: 10px solid black;
border-radius: 80%;
margin-top: 40px;
}
/* .navbar-brand {
border:5px solid black;
border-radius: 80%;
margin-top:80px;
background-color: white;
height: 59%;
}
nav {
width:100%;
height: 15%;
list-style:none;
font-weight: bold;
font-size: 130%;
display:inline;
text-align:center;
background-color: black;
border-bottom: 15px solid black;
}
.nav-link {
color: white !important;
text-shadow: 1px 1px 2px #ffaf1a;
}
#navbar-nav {
position:fixed;
}
div ul {
line-height: 390px
}
div ul li {
width: 1%;
margin-left: 190px;
}
li {
margin-right: -80px;
}
.nav-item-logo {
width:30%;
margin-right: -190px;
}
.nav-link {
margin-top:350%;
}
*/
.navbar-toggler {
background-color: white;
}
body {
background-color: white;
}
.container {
color: black;
margin-top: 200px !important;
min-height: 250px !important;
}
.jumbotron {
background-image: url("rainbow-stripes-jumbotron-background.jpg");
background-color: #e6e6e6;
background-size: 100% 100%;
margin-top: 6%;
border-bottom: 6px solid black;
/*padding-top: 1%;
padding-bottom: 1%;
height: 492px !important;
*/
}
#jumbotron-h1 {
font-size: 480%;
font-weight: bold;
text-align: center;
color: white;
text-shadow: 2px 2px 3px black;
}
#jumbotron-p {
font-size: 280%;
font-weight: bold;
text-align: center;
color: white;
text-shadow: 2px 2px 3px black;
}
#angels-and-demons {
border: 1px solid gray;
border-radius: 4px;
padding: 5px;
width: 285px;
height: 250px;
}
#the-earth-from-space {
border: 1px solid gray;
border-radius: 4px;
padding: 5px;
width: 285px;
height: 250px;
}
#great-teacher {
border: 1px solid gray;
border-radius: 4px;
padding: 5px;
width: 285px;
height: 250px;
}
#poem-a, #poem-b, #poem-c {
display: none;
}
.poem-1, .poem-2, .poem-3 {
margin: auto;
width: 50%;
text-align: center;
font-style: italic;
padding: 10px;
padding-bottom: 100px;
border-bottom: 2px solid currentColor;
color: black;
font-weight: 400;
}
#p-poem {
display: none;
}
.p-title {
text-decoration: underlie;
font-size: 250%;
font-weight: 100 !important;
text-align: center;
}
/*footer starts*/
.footer-bs {
background-color: #3c3d41;
padding: 60px 40px;
color: rgba(255, 255, 255, 1.00);
margin-bottom: 20px;
border-bottom-right-radius: 6px;
border-top-left-radius: 0px;
border-bottom-left-radius: 6px;
}
.footer-bs .footer-brand, .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns {
padding: 10px 25px;
}
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns {
border-color: transparent;
}
.footer-bs .footer-brand h2 {
margin: 0px 0px 10px;
}
.footer-bs .footer-brand p {
font-size: 12px;
color: rgba(255, 255, 255, 0.70);
}
.footer-bs .footer-nav ul.pages {
list-style: none;
padding: 0px;
}
.footer-bs .footer-nav ul.pages li {
padding: 5px 0px;
}
.footer-bs .footer-nav ul.pages a {
color: rgba(255, 255, 255, 1.00);
font-weight: bold;
text-transform: uppercase;
}
.footer-bs .footer-nav ul.pages a:hover {
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
}
.footer-bs .footer-nav h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
.footer-bs .footer-nav ul.list {
list-style: none;
padding: 0px;
}
.footer-bs .footer-nav ul.list li {
padding: 5px 0px;
}
.footer-bs .footer-nav ul.list a {
color: rgba(255, 255, 255, 0.80);
}
.footer-bs .footer-nav ul.list a:hover {
color: rgba(255, 255, 255, 0.60);
text-decoration: none;
}
.footer-bs .footer-social ul {
list-style: none;
padding: 0px;
}
.footer-bs .footer-social h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
}
.footer-bs .footer-social li {
padding: 5px 4px;
}
.footer-bs .footer-social a {
color: rgba(255, 255, 255, 1.00);
}
.footer-bs .footer-social a:hover {
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
}
.footer-bs .footer-ns h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
.footer-bs .footer-ns p {
font-size: 12px;
color: rgba(255, 255, 255, 0.70);
}
@media (min-width: 768px) {
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns {
border-left: solid 1px rgba(255, 255, 255, 0.10);
}
}
/*footer ends*/
我的 HTML 代码：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> PoetryMonkey.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button-a").click(function(){
$("#a-poem").hide("slow");
});
$("#button-b").click(function(){
$("#a-poem").show("slow");
});
$("#button-c").click(function(){
$("#b-poem").hide();
});
$("#button-d").click(function(){
$("#b-poem").show();
});
$("#button-e").click(function(){
$("#c-poem").hide();
});
$("#button-f").click(function(){
$("#c-poem").show();
});
});
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="assignment-5.css" type="text/css" media="all">
</head>
<body>
<!-- Navbar start -->
<nav class="navbar fixed-top navbar-expand-sm navbar-light p-3 mb-2" >
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item-logo">
<a class="poetry-monkey-logo-center" href="#"><img src="final-poetry-monkey-logo.png" class="img-responsive" alt="Logo, a thinking monkey with glasses on"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<!--start of jumbotron-->
<div class="jumbotron jumbotron-fluid">
<div id="jumbotron-text" class="d-flex flex-column mb-3 flex-fill justify-content-center">
<div class="div-1">
<h1 id ="jumbotron-h1" class="display-4"> Welcome To The Poetry Monkey!
</h1>
</div>
<div class="div-2">
<p id="jumbotron-p" class="lead">A place where writers can share poetry and view poetry.</p>
</div>
</div>
</div>
<!--end of jumbotron-->
<br><br><br>
<div class="poem-1">
<img id="angels-and-demons" src="angels-and-demons-poem.png" alt="red firer engery clashing with blue icey energy">
<p class="p-title">Angels And Demons</p>
<p>
One has a homeup high above and a quiet hand that heals. The other lives deep below in a hot shadowy hole and has the darkest of snaky hands that steels.
</p>
<p id="a-poem">They are immoratl foes fighting for mans soul. For thousands of years they've battled again and again. The beast from below craws up into the light. From heaven the golden guardian of good swiftly descends. Once more there will be a clash of thunderous might.
</p>
<button id="button-b" type="button" class="btn btn-primary">Read More</button>
<button id="button-a" type="button" class="btn btn-dark">Read Less</button>
</div>
<br><br><br>
<div class="poem-2">
<img id="the-earth-from-space" src="the-earth-from-space-poem.png" alt="earth view from space">
<p class="p-title">The Earth From Space</p>
<p>
Up above the clouds past the night sky.
With wide eyes gazing down it becomes so clear. I see the truth away from and above the flock up high.
</p>
<p id="b-poem">I see plainly as if I had looked in a miror. We are one as the ocean is whole. And seperation fixes the chains upon us but collaboration gives us the key. One big flow of body abd soul. up above so high the truth I can see.
</p>
<button id="button-d" type="button" class="btn btn-primary">Read More</button>
<button id="button-c" type="button" class="btn btn-dark">Read Less</button>
</div>
<br><br><br>
<div class="poem-3">
<img id="great-teacher" src="great-teacher-poem.png" alt="jesus">
<p class="p-title">Great Teacher</p>
<p>
His wisdom was rooted deep down at the begining of time inside love and outside fear. Before the trees grew tall, man loved and died, or the clouds were spread across the skys.
</p>
<p id="c-poem">His heart bloomed pure as the crytal is clear. He gave us beauty inside and to the beauty outside he opened our eyes. The seeds of his teachings produced a wholesome love. He called for all wars to cease.
Gone from this world now in the glorious palace high above. Shinning bright white he is the prince of peace.
</p>
<button id="button-f" type="button" class="btn btn-primary">Read More</button>
<button id="button-e" type="button" class="btn btn-dark">Read Less</button>
</div>
<!--footer starts-->
<div class="container">
<section style="height:80px;"></section>
<div class="row" style="text-align:center;">
<h2>ThePoetryMonkey.com</h2>
</div>
<!----------- Footer ------------>
<footer class="footer-bs">
<div class="row">
<div class="col-md-3 footer-brand animated fadeInLeft">
<h2>Lorem</h2>
<p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
<p>© 2020 All rights reserved</p>
</div>
<div class="col-md-4 footer-nav animated fadeInUp">
<h4>Menu —</h4>
<div class="col-md-6">
<ul class="pages">
<li><a href="#">Travel</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Explores</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Advice</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list">
<li><a href="#">About Us</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Terms & Condition</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-md-2 footer-social animated fadeInDown">
<h4>Follow Us</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="col-md-3 footer-ns animated fadeInRight">
<h4>Newsletter</h4>
<p>Ducks flying north don't wake up the farmer</p>
<p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-envelope"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</footer>
<section style="text-align:center; margin:10px auto;">
<p>Designed by <a href="http://enfoplus.net">Joseph Minty </a></p>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<!-- end snippet -->
解决方案
为什么您向 class 添加额外的 CSS 是没有意义的collapse，它导致中心的所有内容并添加一些媒体查询以查看这些导航链接并删除也太多的行高。
.navbar {
background-color: black;
height: 15%;
line-height: 280px;
}
li {
padding-right: 10px;
padding-left: 10px;
}
.nav-link {
color: white !important;
font-weight: bold;
font-size: 120%;
font-style: italic
}
.poetry-monkey-logo-center {
height: 15px;
}
.poetry-monkey-logo-center>img {
height: 120px;
width: 130px;
border: 10px solid black;
border-radius: 80%;
margin-top: 40px;
}
/* .navbar-brand {
border:5px solid black;
border-radius: 80%;
margin-top:80px;
background-color: white;
height: 59%;
}
nav {
width:100%;
height: 15%;
list-style:none;
font-weight: bold;
font-size: 130%;
display:inline;
text-align:center;
background-color: black;
border-bottom: 15px solid black;
}
.nav-link {
color: white !important;
text-shadow: 1px 1px 2px #ffaf1a;
}
#navbar-nav {
position:fixed;
}
div ul {
line-height: 390px
}
div ul li {
width: 1%;
margin-left: 190px;
}
li {
margin-right: -80px;
}
.nav-item-logo {
width:30%;
margin-right: -190px;
}
.nav-link {
margin-top:350%;
}
*/
.navbar-toggler {
background-color: white;
}
body {
background-color: white;
}
.container {
color: black;
margin-top: 200px !important;
min-height: 250px !important;
}
.jumbotron {
background-image: url("rainbow-stripes-jumbotron-background.jpg");
background-color: #e6e6e6;
background-size: 100% 100%;
margin-top: 6%;
border-bottom: 6px solid black;
/*padding-top: 1%;
padding-bottom: 1%;
height: 492px !important;
*/
}
#jumbotron-h1 {
font-size: 480%;
font-weight: bold;
text-align: center;
color: white;
text-shadow: 2px 2px 3px black;
}
#jumbotron-p {
font-size: 280%;
font-weight: bold;
text-align: center;
color: white;
text-shadow: 2px 2px 3px black;
}
#angels-and-demons {
border: 1px solid gray;
border-radius: 4px;
padding: 5px;
width: 285px;
height: 250px;
}
#the-earth-from-space {
border: 1px solid gray;
border-radius: 4px;
padding: 5px;
width: 285px;
height: 250px;
}
#great-teacher {
border: 1px solid gray;
border-radius: 4px;
padding: 5px;
width: 285px;
height: 250px;
}
#poem-a, #poem-b, #poem-c {
display: none;
}
.poem-1, .poem-2, .poem-3 {
margin: auto;
width: 50%;
text-align: center;
font-style: italic;
padding: 10px;
padding-bottom: 100px;
border-bottom: 2px solid currentColor;
color: black;
font-weight: 400;
}
#p-poem {
display: none;
}
.p-title {
text-decoration: underlie;
font-size: 250%;
font-weight: 100 !important;
text-align: center;
}
/*footer starts*/
.footer-bs {
background-color: #3c3d41;
padding: 60px 40px;
color: rgba(255, 255, 255, 1.00);
margin-bottom: 20px;
border-bottom-right-radius: 6px;
border-top-left-radius: 0px;
border-bottom-left-radius: 6px;
}
.footer-bs .footer-brand, .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns {
padding: 10px 25px;
}
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns {
border-color: transparent;
}
.footer-bs .footer-brand h2 {
margin: 0px 0px 10px;
}
.footer-bs .footer-brand p {
font-size: 12px;
color: rgba(255, 255, 255, 0.70);
}
.footer-bs .footer-nav ul.pages {
list-style: none;
padding: 0px;
}
.footer-bs .footer-nav ul.pages li {
padding: 5px 0px;
}
.footer-bs .footer-nav ul.pages a {
color: rgba(255, 255, 255, 1.00);
font-weight: bold;
text-transform: uppercase;
}
.footer-bs .footer-nav ul.pages a:hover {
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
}
.footer-bs .footer-nav h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
.footer-bs .footer-nav ul.list {
list-style: none;
padding: 0px;
}
.footer-bs .footer-nav ul.list li {
padding: 5px 0px;
}
.footer-bs .footer-nav ul.list a {
color: rgba(255, 255, 255, 0.80);
}
.footer-bs .footer-nav ul.list a:hover {
color: rgba(255, 255, 255, 0.60);
text-decoration: none;
}
.footer-bs .footer-social ul {
list-style: none;
padding: 0px;
}
.footer-bs .footer-social h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
}
.footer-bs .footer-social li {
padding: 5px 4px;
}
.footer-bs .footer-social a {
color: rgba(255, 255, 255, 1.00);
}
.footer-bs .footer-social a:hover {
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
}
.footer-bs .footer-ns h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
.footer-bs .footer-ns p {
font-size: 12px;
color: rgba(255, 255, 255, 0.70);
}
@media (min-width: 768px) {
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns {
border-left: solid 1px rgba(255, 255, 255, 0.10);
}
}
/*footer ends*/<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> PoetryMonkey.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button-a").click(function(){
$("#a-poem").hide("slow");
});
$("#button-b").click(function(){
$("#a-poem").show("slow");
});
$("#button-c").click(function(){
$("#b-poem").hide();
});
$("#button-d").click(function(){
$("#b-poem").show();
});
$("#button-e").click(function(){
$("#c-poem").hide();
});
$("#button-f").click(function(){
$("#c-poem").show();
});
});
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="assignment-5.css" type="text/css" media="all">
</head>
<body>
<!-- Navbar start -->
<nav class="navbar fixed-top navbar-expand-sm navbar-light p-3 mb-2" >
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item-logo">
<a class="poetry-monkey-logo-center" href="#"><img src="final-poetry-monkey-logo.png" class="img-responsive" alt="Logo, a thinking monkey with glasses on"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<!--start of jumbotron-->
<div class="jumbotron jumbotron-fluid">
<div id="jumbotron-text" class="d-flex flex-column mb-3 flex-fill justify-content-center">
<div class="div-1">
<h1 id ="jumbotron-h1" class="display-4"> Welcome To The Poetry Monkey!
</h1>
</div>
<div class="div-2">
<p id="jumbotron-p" class="lead">A place where writers can share poetry and view poetry.</p>
</div>
</div>
</div>
<!--end of jumbotron-->
<br><br><br>
<div class="poem-1">
<img id="angels-and-demons" src="angels-and-demons-poem.png" alt="red firer engery clashing with blue icey energy">
<p class="p-title">Angels And Demons</p>
<p>
One has a homeup high above and a quiet hand that heals. The other lives deep below in a hot shadowy hole and has the darkest of snaky hands that steels.
</p>
<p id="a-poem">They are immoratl foes fighting for mans soul. For thousands of years they've battled again and again. The beast from below craws up into the light. From heaven the golden guardian of good swiftly descends. Once more there will be a clash of thunderous might.
</p>
<button id="button-b" type="button" class="btn btn-primary">Read More</button>
<button id="button-a" type="button" class="btn btn-dark">Read Less</button>
</div>
<br><br><br>
<div class="poem-2">
<img id="the-earth-from-space" src="the-earth-from-space-poem.png" alt="earth view from space">
<p class="p-title">The Earth From Space</p>
<p>
Up above the clouds past the night sky.
With wide eyes gazing down it becomes so clear. I see the truth away from and above the flock up high.
</p>
<p id="b-poem">I see plainly as if I had looked in a miror. We are one as the ocean is whole. And seperation fixes the chains upon us but collaboration gives us the key. One big flow of body abd soul. up above so high the truth I can see.
</p>
<button id="button-d" type="button" class="btn btn-primary">Read More</button>
<button id="button-c" type="button" class="btn btn-dark">Read Less</button>
</div>
<br><br><br>
<div class="poem-3">
<img id="great-teacher" src="great-teacher-poem.png" alt="jesus">
<p class="p-title">Great Teacher</p>
<p>
His wisdom was rooted deep down at the begining of time inside love and outside fear. Before the trees grew tall, man loved and died, or the clouds were spread across the skys.
</p>
<p id="c-poem">His heart bloomed pure as the crytal is clear. He gave us beauty inside and to the beauty outside he opened our eyes. The seeds of his teachings produced a wholesome love. He called for all wars to cease.
Gone from this world now in the glorious palace high above. Shinning bright white he is the prince of peace.
</p>
<button id="button-f" type="button" class="btn btn-primary">Read More</button>
<button id="button-e" type="button" class="btn btn-dark">Read Less</button>
</div>
<!--footer starts-->
<div class="container">
<section style="height:80px;"></section>
<div class="row" style="text-align:center;">
<h2>ThePoetryMonkey.com</h2>
</div>
<!----------- Footer ------------>
<footer class="footer-bs">
<div class="row">
<div class="col-md-3 footer-brand animated fadeInLeft">
<h2>Lorem</h2>
<p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
<p>© 2020 All rights reserved</p>
</div>
<div class="col-md-4 footer-nav animated fadeInUp">
<h4>Menu —</h4>
<div class="col-md-6">
<ul class="pages">
<li><a href="#">Travel</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Explores</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Advice</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list">
<li><a href="#">About Us</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Terms & Condition</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-md-2 footer-social animated fadeInDown">
<h4>Follow Us</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="col-md-3 footer-ns animated fadeInRight">
<h4>Newsletter</h4>
<p>Ducks flying north don't wake up the farmer</p>
<p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-envelope"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</footer>
<section style="text-align:center; margin:10px auto;">
<p>Designed by <a href="http://enfoplus.net">Joseph Minty </a></p>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>推荐阅读
- ruby-on-rails - Ruby on Rails Bootstrap 下拉菜单在开发中工作，而不是 Heroku
- javascript - 在复选框限制后显示消息（多个实例）
- angular - 从角度 4 的任何地方访问全局文件
- sql - 如何在 SQL 的 select 语句中分配随机值？
- angular - 首次在 Google Cloud 上加载 Express/Angular 5 应用程序会在浏览器上引发“未找到”
- javascript - 如何在不使用 position: absolute 的情况下强制 div 保持在同一行？
- r - 在函数中使用 fromJSON 来捕获 URL 的数据
- javascript - Chart.js 无法在我的浏览器上运行
- c# - 在 Unity3D 游戏中控制广告之间的时间
- c# - 在 WPF 中绑定失败