Здравствуйте!
Меню раскрывается при нажатии на "бургер" в консоле всё видно, но на экране не отображается. Где то в коде накосячил?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<header class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-nav">
<a class="navbar-brand" href="#">Мой сайт</a>
<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 mr-auto">
<li class="nav-item "><a class="nav-link" href="index.html"><span>Главная страница</span></a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><span>Портфолио</span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Повышение квалификации</a>
<a class="dropdown-item" href="#">Заслуги</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#"><span>О себе</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span>123</span></a></li>
</ul>
</div>
</nav>
</header>
<div class="row">
<div class="col-md-12">
<main>
<div class="wrapper">
</div>
</main>
</div>
</div>
<footer>
<div class="cont-wrap clr">
<div class="copy">
Copyright Сайт воспитателя © 2018
</div>
</div>
</footer>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js" ></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
@font-face {
font-family: 'AgoraSansProMedium';
src: url('../fonts/AgoraSansProMedium.ttf');
}
@font-face {
font-family: 'AgoraSansProRegular';
src: url('../fonts/AgoraSansProRegular.ttf');
}
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
body {
font-family: 'AgoraSansProRegular';
background: #f2f2f2 url(../img/fon-site.jpg) no-repeat center 0;
font-weight: 300;
font-size: 16px;
color: #555;
-webkit-font-smoothing: antialiased; // сглаживание шрифтов на моб. устр.
-webkit-overflow-scrolling: touch;
margin-top: 70px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
color: #333;
}
p {
line-height: 28px;
margin-bottom: 25px;
}
a:hover {
text-decoration: none;
color: #16d0a4;
}
.inf-wrap .col-md-4 {
padding-left: 0px;
}
.wrapper {
background-color: #fff;
padding: 15px 15px;
}
.container .col-md-12 {
padding: 0;
}
.navbar {
height: 55px;
}
nav {
padding: 0 10px 0 0;
width: 100%;
position: relative;
flex: 3 1 10px;
height: 33px;
text-align: left;
}
.bg-nav {
background-color: #323c63;
}
.navbar-brand {
margin-right: 12rem;
}
.navbar-light .navbar-brand {
color: #fff;
}
.navbar-light .navbar-brand:hover {
color: #02ab84;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #02ab84;
}
.navbar-light .navbar-nav .nav-link:focus {
color: #02ab84;
}
.navbar-light .navbar-nav .show > .nav-link {
color: #02ab84;
}
.dropdown-menu {
background-color: #323c63;
top: 110%;
border-radius: 0.15rem;
}
.dropdown-item {
color: #fff;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #02ab84;
text-decoration: none;
background-color: #2E345D;
}
.btn-light {
color: #fff;
font-size: 14px;
font-style: italic;
line-height: 1.86;
border-radius: 21px;
background-color: #02ab84;
padding: 8px 40px;
margin-top: 30px;
transition: all .3s;
border-color: #02ab84;
}
.btn-light a span {
color: #fff;
}
.btn-light:hover {
color: #02ab84;
}
.inf-wrap {
display: flex;
background-color: #3e4b7d;
color: #fff;
}
.photo {
max-width: 27%;
display: flex;
}
.text-block {
display: flex;
align-items: center;
}
.text-block h1 {
font-size: 32px;
font-weight: 600;
font-style: italic;
line-height: 1.5;
margin: 10px 0;
color: #fff;
}
.text-block p {
font-size: 15px;
line-height: 1.5;
margin: 5px 0;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#content {
-webkit-box-flex: 5;
-ms-flex: 5 1 10px;
flex: 5 1 10px;
background-color: #fff;
padding: 30px 25px;
max-width: 72%;
}
.carousel-control-next:hover, .carousel-control-prev:hover {
background-color: #0000001a;
}
.wrapper .col-md-8 {
margin: 0 auto;
}
footer {
min-height: 85px;
width: 100%;
}
footer .cont-wrap {
padding: 15px 0;
}
.copy {
float: left;
}
Простой
Простой
