Я пытаюсь конвертировать существующий сайт (и сделать его адаптивным) с помощью BootStrap (4.3.1) - и изучать Bootstrap, когда я прохожу его.
- У меня есть top-Nav
- , затем средняя часть - содержащая:
- a Боковая панель (слева)
- & содержимое страницы справа
- затем внизу Нижний колонтитул .
Но попробуйте, как яможет (и я потратил 2 дня, читая примеры Bootstrap и Stackoverflow Qs) - я не могу сделать так, чтобы средняя часть была такой же ширины и соответствовала заголовку - без нелепого количества CSS.
Я уверен / надеюсь? есть простой способ;) Что я не делаю / делаю неправильно?
Вот мой код (встроенный код / цвета, чтобы помочь мне увидеть, где находятся элементы)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body color="pink">
<!-- Page container -->
<div id="HomePage"class="container">
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
<!-- Middle Section of the Page page -->
<div class="container w-100 p-0">
<div class="container row w-100 p-0">
<!-- Start of left Sidebar -->
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
</div>
<!-- Page Footer -->
<nav class="navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</div> <!-- End of Page container -->
</body>
</html>
PS - Обоснование: Мне нужна средняя часть полной ширины, так как на некоторых страницах есть изображения в верхнем правом углу страницы, которые должны располагаться в линию с правым краем заголовка, а боковая панель содержит изображения полной ширины, почти без отступов и т. Д.
Спасибо за любую помощь.