Html can'；t使主标签扩展到监视器中的所有空间
我正在为我的webapp使用仪表板的base.html，并试图在侧栏导航后将div扩展到显示器剩余的所有空间，侧栏导航会固定左侧的3列。另外，当屏幕较小时，它意味着是一个开关的按钮不包含侧边栏菜单。Html can'；t使主标签扩展到监视器中的所有空间,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在为我的webapp使用仪表板的base.html，并试图在侧栏导航后将div扩展到显示器剩余的所有空间，侧栏导航会固定左侧的3列。另外，当屏幕较小时，它意味着是一个开关的按钮不包含侧边栏菜单。 此页面的代码为： {% load static %} <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <!-- Required meta tags
此页面的代码为：
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- CSS Files -->
<link rel="stylesheet" href="{% static 'Drivers_App_Management/css/base.css' %}" type="text/css" media="screen">
<!-- Bootstrap CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<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">
<style media="screen" type="text/css">
/* Chart.js */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
</style>
{% block title %}
{% endblock title %}
</head>
<body>
<header class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="{% url 'Drivers_App_Management:index' %}">
<span class="d-flex">
<img src="{% static 'Drivers_App_Management/media/ST.png' %}" class="img-fluid rounded-circle" width="47" height="60" alt="...">
</span>
</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">
Bonjour:
{{ user.first_name }}
{{user.registration_number}}
</span>
</div>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#"> Link to somewhere </a>
</li>
</ul>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar-dark collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Customers </a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Title</span>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#"> Month</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Last Quarter </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Year-end sale </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Sociale </a>
</li>
</ul>
</div>
</nav>
<main id="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<div class="d-flex justify-content-evenly flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2"> Tableau de bord</h1>
</div>
{% block content %}{% endblock content %}
</main>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
网页看起来像：您错误地为
main<main id="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
从正确布局的角度来看，id属性不能包含标识符列表。这是属性名，必须只包含一个值。谢谢，我没有看到它。切换器问题仍然存在。@E.Mohammed，但它对我有效-
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">