如何使用Bootstrap 4 flexbox填充可用内容？

Question

我有一个使用bootstrap 4的角度应用程序.我有一个粘贴到顶部的导航栏,我想添加填充浏览器中剩余空间的内容.除了顶部的导航栏,我有另一个div本身包含页眉和页脚内容.在页眉和页脚之间,我有一个主内容部分,我希望该部分(#two在我下面的示例中)填充所有空白区域.

我以为我可以使用css flexbox来完成这个,但是当我进入bootstrap世界时,我的简单非引导flexbox示例似乎什么也没做.我正在使用这些文档试图解决这个问题.

我认为使用align-self-stretch应该有助于实现这个目标,但它看起来像包含元素可能正在调整自己的大小足以容纳我的#outer内容,因此没有扩展Flexbox要完成.我试着天真地只是添加height:100%样式到包含div只是为了尝试伸展,但这似乎没有帮助.

我根据@ ZimSystem的响应创建了这个plunker示例.他的代码示例似乎完全按照我的意愿工作,但当我尝试将更改分成我的简单角度代码时,柔性拉伸没有发生.我不确定我在转换中打破它是做什么的.

这是我目前正在查看的整个角度分量:

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

这是显示导航栏和注入点的应用程序容器:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav"> 
            <li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
        </ul>
    </nav>
    <router-outlet></router-outlet>
</div>  

我如何让我的#twodiv扩展以填充空间,同时让我#one和#threediv作为内容页眉和页脚锚定在内容区域的顶部和底部？

Answer 1

更新Bootstrap 4.1.0

在flex-grow-1和flex-fill类都包含在引导4.1.0

更新Bootstrap 4.0.0

添加这样的flex-grow类:

.flex-grow {
    flex: 1 0 auto;
}

然后,实用程序类可用于其余布局:

 <div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link">Item 1</a></li>
        </ul>
    </nav>
    <div id="outer" class="d-flex flex-column flex-grow">
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content 40px height
        </div>
    </div>
</div>

https://www.codeply.com/go/3ZDkRAghGU

Answer 2

您的组件被包装到一个<flex>元素中，该元素需要具有相同的flexbox样式才能垂直拉伸，从而使其内容能够随之拉伸。因此，将添加class="d-flex flex-column flex-grow"到<flex>工作。这是您的unk夫例子的工作之叉。