我需要修复 Bootstrap h-100 类，它不起作用

首先，您不应该将.rows 作为的直接子级<body>。您需要将它们包装在或.container中.container-fluid。如果不这样做，您将在不同的屏幕宽度下在页面上看到水平滚动条。请注意，您不应将 a.container放在 another 内.container，但可以将 a 放在.containera 内.container-fluid。其次，为了.h-100工作，您需要将其沿着子元素链传递到每个元素，因为它始终是100%其父元素。如果一个父元素没有它，那么链就会被破坏，并且它的子元素将具有100%（0或者maxContent如果该元素具有一些流内容）。这是您的示例.container：<html class="h-100"><head> <title>Admin</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/></head><body class="h-100"> <div class="container h-100"> <div class="row h-100"> <div class="col-md-2 h-100 bg-success" id="sidebar"></div> <div class="col-md-10 bg-danger h-100"></div> </div> </div></body></html>这是.container-fluid：<html class="h-100"><head> <title>Admin</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/></head><body class="h-100"> <div class="container-fluid h-100"> <div class="row h-100"> <div class="col-md-2 h-100 bg-success" id="sidebar"></div> <div class="col-md-10 bg-danger h-100"></div> </div> </div></body></html>虽然 Bootstrap 被认为相当容易上手和使用，但它也有一些问题。

我需要修复 Bootstrap h-100 类，它不起作用

2回答