如何使用Bootstrap 4 flexbox填充可用内容? [英] How to use Bootstrap 4 flexbox to fill available content?

问题描述

我有一个使用引导程序4的有角度的应用程序.我的导航栏位于顶部，我想添加填充浏览器中剩余空间的内容.除了顶部的导航栏外，我还有另一个div，它本身包含页眉和页脚内容.在页眉和页脚之间，我有一个主要的内容部分，并且我希望该部分(在下面的示例中为#two)填充所有空白空间.

I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I want to add content that fills the remaining space in the browser. Aside from the navbar at the top, I have another div that itself contains header and footer content. Between the header and footer, I have a main content section, and I want that section (#two in my example below) to fill all empty space.

我以为可以使用css flexbox来完成此操作，但是当我进入bootstrap世界时，我简单的非bootstrap flexbox示例似乎无济于事.我正在使用这些文档尝试解决这个问题.

I thought I could use css flexbox to accomplish this, but my simple non-bootstrap flexbox example seemed to do nothing when I moved into the bootstrap world. I was using these docs to try to figure this out.

我认为使用align-self-stretch应该有助于实现此目标，但是看起来包含元素的大小可能恰好足以容纳我的#outer内容，因此没有flexbox可以扩展.我只是尝试天真地将height:100%样式添加到包含的div中，只是试图进行一些扩展，但这似乎无济于事.

I thought using align-self-stretch should help accomplish this goal, but it sort of looks like the containing elements might be sizing themselves just big enough to hold my #outer content, so there's no flexbox expanding to be done. I tried naively just adding height:100% styles to the containing divs just to try to get some stretching, but that didn't seem to help.

我基于@ZimSystem的响应创建了这个 plunker示例.他的codeply示例似乎完全按照我的要求工作，但是当我尝试将更改组合到我的简单角度代码中时，没有发生伸缩.我不确定要如何在转换中打破它.

I created this plunker example based on @ZimSystem's response. His codeply example seemed to work exactly as I wanted, but when I tried to piece the changes into my simple angular code, the flex stretching didn't happen. I'm not sure what I'm doing to break it in the conversion.

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

This is the entirety of the angular component I am viewing at the moment:

<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>

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

And here's the application container showing the navbar and injection point:

<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>  

如何让#two div扩展以填充空间，同时让#one和#three div作为内容页眉和页脚锚定在内容区域的顶部和底部?

How can I get my #two div to expand to fill the space while having my #one and #three divs acting as content headers and footers anchored to the top and bottom of the content area?

推荐答案

更新Bootstrap 4.1.0

flex-grow-1和flex-fill类包含在Bootstrap 4.1.0中

The flex-grow-1 and flex-fill classes are included in Bootstrap 4.1.0

更新Bootstrap 4.0.0

添加这样的flex-grow类:

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

然后，实用程序类可以用于其余的布局:

Then, the utility classes can be used for the rest of the layout:

 <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

这是在 Bootstrap 4.3.1 上使用的另一个示例，该示例具有导航栏，侧栏和页脚以及可滚动的内容区域: https://www.codeply.com/go/LIaOWljJm8

Here's another example with on Bootstrap 4.3.1 that has a navbar, sidebar and footer with scrolling content area: https://www.codeply.com/go/LIaOWljJm8

这篇关于如何使用Bootstrap 4 flexbox填充可用内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！