Не корректно работает Grid System.
Bootstrap урок 8. Ниже приведен код из моего Sublime Text. Код совпадает с приведенном в уроке, но по какой-то причине блоки располагаются не так как в видео, а как попало. И вообще не понятно если мы прописываем div'ы зеленого и черного цвета в div'е красного цвета, то почему в видео урока div'ы зеленого и черного цвета отображаются под div'ом красного цвета они должны отобразиться в div'е красного цвета а точнее полностью его закрыть.
<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<title>КиноМонстр Bootstrap</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="background-color: red; height: 100px"> <!--container-fluid растягивает контейнер на всю страницу-->
<div class="row"> <!--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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="assets/css/bootstrap.min.js"></script>
</body>
</html>
2 ответов
Посмотрите, там в интерактивном уроке есть код, сравните с вашим. Ещё поверьте подключён ли физически bootstrap, через исходный код страницы должен открываться файл bootstrap
В своем вопросе я привел весь код. Код в точности совпадает с кодом в уроке, но отображается не корректно.
Приведенный в Вашем уроке код сильно отличается от кода скопированного с bootstrap. Возможно это происходит потому, что у Вас в уроке рассматривается старая версия bootstrap?
Я бы с удовольствием приложил Print Screen'ы но в вашей форме ввода вопроса это сделать невозможно.