Курс Bootstrap. 8 урок Grid system. Некорректно работает код
Здравствуйте. Видела аналогичный вопрос в комьюнити, но ответа на него так и не было дано. Поэтому задаю свой такой же вопрос.
Код, прописанный ниже - выдает на экран красную полосу - посередине получается зеленая (на 9/12) и внизу на 3/12 черная.
Код написано согласно обновлениям на сайте bootstrap , все файлы новые-версия 4.1.3
<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css"> КОММЕНТАРИЙ=(это я добавила от отчаяния-но не помогло-ничего не изменилось)
<title>Киномонстр bootstrap</title>
</head>
<body>
<div class="container-fluid" style="background-color:red; height:100px">
<div class="row">
<h1>Hello, world!</h1>
<div class="col-lg-9" style="background-color:green; height:100px"></div>
<div class="col-lg-3" style="background-color:black; height:100px"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
Такой результат, как у Вас, получается только если переделать немного код. Но можно ли так написать? Верно ли это? То есть я закрываю сначала первый див - красный. Потом открываю второй див row и туда заношу зеленый и черный цвет....
<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css">
<title>Киномонстр bootstrap</title>
</head>
<body>
<div class="container-fluid" style="background-color:red; height:100px">
<div class="row">
<h1>Hello, world!</h1></div></div>
<div class="row">
<div class="col-lg-9" style="background-color:green; height:100px"></div>
<div class="col-lg-3" style="background-color:black; height:100px"></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>