Html Bootstrap4对齐项目结束不工作_Html_Css_Row_Vertical Alignment_Bootstrap 4

Html Bootstrap4对齐项目结束不工作

html css bootstrap-4

Html Bootstrap4对齐项目结束不工作,html,css,row,vertical-alignment,bootstrap-4,Html,Css,Row,Vertical Alignment,Bootstrap 4,因此，我已经在这方面工作了两个星期的大半个星期了，但似乎无法按预期完成这项工作。我开始认为，这可能是一个问题，有问题的行/列有多深，但我真的想得到一些外部的见解简言之，它是一个包含->2行的页面，其中第二行包含->2列，第二行包含->3行作为面包屑、每页的主要内容和页脚。如果页面需要扩展，导航应保持静止。我模模糊糊地记得，当我开始看到一些帖子时，人们试图做类似的布局，但没有能够再次找到这些帖子下面是我能得到的最精简的表格中的代码： <!DOCTYPE html> <html

因此，我已经在这方面工作了两个星期的大半个星期了，但似乎无法按预期完成这项工作。我开始认为，这可能是一个问题，有问题的行/列有多深，但我真的想得到一些外部的见解

简言之，它是一个包含->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>


html，正文{
身高：100%；
宽度：100%；
}
氢{
字体系列：“Chivo”，无衬线；
}
在头球！
在导航栏里！
在面包屑里！
总的来说！
在页脚

我的问题是：
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：

编辑

这里有一个可行的方法：

可以做到，但是如果您使用的是bootstrap4，建议使用flexbox而不是容器和行。