左侧栏和页面内容排列的引导问题

问题描述 投票:0回答:2

[我正在尝试使用BootStrap(4.3.1)转换现有站点(并使它具有响应能力)-并在学习过程中学习Bootstrap。

  • 我有一个top-Nav
  • 然后是中间部分-包含:
    • a Sidebar(在左侧)
    • 页面内容在右侧
  • 然后在底部显示Footer

但是请尽我所能(&我花了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-原理:我需要中间部分为全角,因为在某些页面上,页面右上方的图像应与标题的正确边缘对齐,边栏包含全宽图像,几乎没有填充等。

感谢您的帮助。

css bootstrap-4
2个回答
0
投票

width:100%添加到中间部分。这应该拉伸div以占据父级(在这种情况下为容器的)宽度的100%,该宽度也与标头的宽度相同。


0
投票

只需将网站的每个内容包装到不同的row中,然后使用col将网格列设置为其内部div。像这样:

© www.soinside.com 2019 - 2024. All rights reserved.