Я использую bootstrap 4 для проекта. Когда я переключаю панель навигации, она перекрывается с содержимым, которое следует за ней, как я могу заставить остальную часть содержимого перемещаться вниз, чтобы настроить раскрывающийся список?
Я добавил поле в 50 пикселей к своему телу.
Я не знаю, почему во фрагменте заголовок отображается немного прозрачно. Вот так сайт выглядит в моем браузере:
.row-header {
margin: 0px auto;
padding: 0px;
}
body {
padding: 50px 0px 0px 0px;
z-index: 0;
}
.navbar-dark {
background-color: #512da8;
}
.navbar-brand {
padding-right: 20px;
}
.row-content {
margin: 0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height: 400px;
}
.footer {
background-color: #d1c4e9;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
.jumbotron {
padding: 70px 30px 70px 30px;
margin: 0px auto;
background: #9575cd;
color: floralwhite;
}
address {
font-size: 80%;
margin: 0px;
color: #0f0f0f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<link rel="stylesheet" href="css/styles.css" />
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand mr-auto">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="#" class="nav-link"><span class="fa fa-home fa-lg"></span> Home</a>
</li>
<li class="nav-item">
<a href="./aboutUs.html" class="nav-link"><span class="fa fa-info fa-lg"></span> About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item">
<a href="./contactus.html" class="nav-link"><span class="fa fa-address-card fa-lg"></span>
Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our
lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-12 col-sm col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives,
ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col-12 col-sm col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers,
six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just
$19.99 per person </p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col-12 col-sm col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with
whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion
experiences. </p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="./aboutUs.html">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="./contactus.html">Contact</a></li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i>: <a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
<a href="http://google.com/+" class="btn btn-social-icon btn-google"><i
class="fa fa-google-plus fa-lg"></i></a>
<a href="http://www.facebook.com/profile.php?id=" class="btn btn-social-icon btn-facebook"><i
class="fa fa-facebook fa-lg"></i></a>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin"><i
class="fa fa-linkedin fa-lg"></i></a>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter"><i
class="fa fa-twitter fa-lg"></i></a>
<a href="http://youtube.com/" class="btn btn-social-icon btn-google"><i
class="fa fa-youtube fa-lg"></i></a>
<a href="mailto:" class="btn btn-social-icon"><i class="fa fa-envelope fa-lg"></i></a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>