我正在尝试使用 Bootstrap (4.3.1( 转换现有站点(并使其响应( - 并在我浏览它时学习 Bootstrap。
- 我有一个顶级导航
- 然后是中间部分- 包含：
- 侧边栏(左侧(
- 右侧的页面内容
- 然后在底部的页脚。
但是尽我所能尝试(我花了 2 天时间阅读 Bootstrap 的示例和 Stack Overflow 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 - 理由：我需要中间部分全宽，因为在某些页面上，页面右上角的图像应该与标题的右边缘对齐， 侧边栏包含全宽图像，几乎没有填充等。
只需将网站的每个部分包装到不同的row中，然后使用col将网格列设置为其内部div。这样：
<div id="homePage" class="container">
<header class="row">
<nav class="col navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
</header>
<div class="row">
<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>
<footer class="row">
<nav class="col navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</footer>
</div>
将width:100%添加到中间部分。这应该拉伸div 以占据父宽度(在本例中为容器(宽度的 100%，这也与标题宽度相同