所以我已经为此工作了 2 周的大部分时间，但似乎无法按预期进行。我开始认为所讨论的行/列的深度可能是一个问题，但我真的很想获得一些外部见解。
简而言之，该页面有 -> 2 行，其中第二行包含 -> 2 列，其中第二行包含 -> 3 行是面包屑，每页的主要内容和页脚。如果页面需要扩展导航应该保持静态。我依稀记得刚开始时看到一些人试图做类似布局的帖子，但再也找不到那些帖子了。
下面是我能得到的最精简形式的相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap and self-made CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- various imports -->
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet">
<style>
html, body{
height: 100%;
width: 100%;
}
h2 {
font-family: 'Chivo', sans-serif;
}
</style>
</head>
<body style="background-color: #000;"> <!-- bgc: black -->
<div class="container-fluid h-100">
<div class="row h-25"style="background-color: #F00;"> <!-- bgc: red -->
<div class="col">
<h1>In the header!</h1>
</div>
</div>
<div class="row h-75" style="background-color: #0F0;"> <!-- bgc: green -->
<div class="col-sm-2 no-gutters h-100" style="background-color: #00F;"> <!-- bgc: blue -->
<nav>
<h2>In the nav bar!</h2>
</nav>
</div>
<div class="col-sm-10 no-gutters h-100" style="background-color: #FF0;"> <!-- bgc: yellow -->
<div class="row align-items-start" style="background-color: #FFF;"> <!-- bgc: white -->
<div class="col">
<main>
<h2>In the breadcrumb!</h2>
</main>
</div>
</div>
<div class="row align-items-center" style="background-color: #0FF;"> <!-- bgc: cyan -->
<div class="col">
<main>
<h2>In the main!</h2>
</main>
</div>
</div>
<div class="row align-items-end" style="background-color: #F0F;"> <!-- bgc: magenta -->
<div class="col">
<footer>
<h2>In the footer</h2>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
我的问题是:
1. 这样的布局甚至可以在 bootstrap4 中完成吗？
2. 如果可以，需要做哪些改变才能使其发挥作用？
3. 在较小的屏幕上折叠时“导航栏”保持在 h-100 而不是收缩，我是否正确使用子类进行流体缩放？
最佳答案
抱歉，我没有太多在 bootstrap 4 中使用行和容器的经验，但是我可以为您提供这种布局的 flexbox 实现。如果您了解 flexbox，则可以使用以下代码作为引用来创建自己的布局。
以下是实现您提到的布局层次结构的准系统 flexbox 代码。我知道这不是最好的答案，但希望它能有所帮助。
<div class="container-fluid d-flex flex-column" style="height: 100%"> <!-- Main container declared as flexbox column -->
<div class="h-25"> <!-- Row 1 in the container -->
</div>
<div class="h-75 d-flex row"> <!-- Row 2 in the container. This itself is a flexbox row -->
<div class="col-sm-2"> <!-- Column 1 of the row -->
</div>
<div class="col-sm-10 d-flex flex-column"> <!-- Column 2 of the row -->
<div> <!-- Row 1 of the column -->
</div>
<div> <!-- Row 2 of the column -->
</div>
<div> <!-- Row 3 of the column -->
</div>
</div>
</div>
</div>
引用boostrap4 flexbox文档了解flexbox https://v4-alpha.getbootstrap.com/utilities/flexbox/ :
编辑
这是一个有效的 plunker:https://plnkr.co/edit/WWT5XoHyvLf2paKQItSH?p=preview
关于html - Bootstrap4 align-items-end 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46509604/