Поведение блоков в 8 уроке по bootstrap?

Александр2 июня 2020 г.4 ответов

<div class="container-fluid" style="background-color: red; height: 100px">
      <div class="row">
      <h1>Привет, Мир</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>

В 8 уроке по bootstrap создаю три блока: красный, зеленый и черный. Код проверил все как у вас.

Но почему то зеленый блок при большом разрешении оказывается на красном в центре, а не под ним как у вас?

4 ответов

Но почему то зеленый блок при большом разрешении оказывается на красном в центре, а не под ним как у вас?

Я попробовал запустить ваш код на мониторе с разрешением 1920x1080, красный блок сверху, зеленый слева, черный справа, как в уроке.

Какое у вас разрешение экрана?

У меня весь код такой получился:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Grid System</title>
	
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
	
     <div class="container-fluid" style="background-color: red; height: 100px">
      <div class="row">
      <h1>Привет, Мир</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>
	
	<!-- Подключаем jQuery и Bootstrap JS через CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Кстати, bootstrap у вас точно подключен? Попробуйте мой код запустить.

student_zhO6Hwd_27 июня 2026 г.

у меня разрешение 1920х1200

Александр27 июня 2026 г.

При уменьшении разрешения блоки становятся друг под друга

Александр27 июня 2026 г.

Спасибо большое разобрался.

Не хватало одного слеша перед assets в ссылке на bootstrap :)

Александр27 июня 2026 г.

Ваш ответ

Войдите, чтобы ответить