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

Question

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

我认为我可以使用css flexbox来实现这一点，但是当我进入bootstrap世界时，我的简单非bootstrap flexbox示例似乎什么也不做。我正在使用these docs来试图解决这个问题。

我认为使用align-self-stretch应该有助于实现这一目标，但它看起来像包含的元素可能只是大到足以容纳我的#outer内容，所以没有flexbox扩展可以完成。我试着天真地试图加入height:100%样式到包含的div，只是为了试图拉伸，但这似乎没有帮助。

我根据@ ZimSystem的回应创建了这个plunker example。他的代码示例似乎完全按照我想要的方式工作，但是当我试图将更改分解为简单的角码时，Flex伸缩并未发生。我不确定我在转换中如何破解它。

这是角分量我正在查看的时刻的全部：

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

我怎样才能让我的#two div扩大以填充空间，同时让我的#one和#three divs充当内容页眉和页脚锚定到内容区域的顶部和底部？

Answer 1

更新引导4.0.0

添加flex-grow类是这样的：

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

然后，utility classes可用于布局的其余部分：

<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

的问题，在您的角度plunker使用ZimSystem's markup时，是该组件插入到呈现的HTML作为与flex标签额外的容器：

<div class="d-flex flex-column h-100"> 
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded"> 
     ... 
    </nav> 
    <router-outlet></router-outlet> 
    <flex> 
     <div id="outer" class="d-flex flex-column flex-grow"> 
      ... 
     </div> 
    </flex> 
</div> 

为了使其工作打算，你可以从组件中删除外部div，并在组件的主机容器上设置flex类，如this modified plunker所示。

import {Component, NgModule, HostBinding, VERSION} from '@angular/core' 
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'flex', 
    template: ` 
     <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> 
    ` 
}) 
export class FlexComponent { 
    @HostBinding('class') classes = 'd-flex flex-column flex-grow'; 
    constructor() { } 
} 

Answer 3

CSS

html, body { 
    height: 100%; 
} 

.flex-grow { 
    flex: 1; 
} 

flex.components.ts

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'flex', 
    host: {'class': 'flex-grow'}, 
    template: ` 

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

    ` 
}) 
export class FlexComponent { 
    constructor() {} 
} 

结果 - https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=preview 谢谢:)

Answer 4

.wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 

.flex-grow { 
    flex: 1; 
} 

添加包含您的内容BLO包装部件cks，并将flex-grow类应用到您要填充剩余空间的类。

Answer 5

如果您无法控制您正在使用的类的行为。只删除它，只使用这个CSS。

html, 
 
body, 
 
flex { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.outer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.two { 
 
    background-color: #123; 
 
    flex-grow: 1; 
 
    color: #FFF; 
 
}

<flex> 
 
    <div class="outer"> 
 
    <div class="one"> 
 
     Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> 
 
    </div> 
 
    <div class="two"> 
 
     Hey. This is body 
 
    </div> 
 
    <div class="three"> 
 
     Hey. This is footer <br> Hey. This is footer <br> 
 
    </div> 
 
    </div> 
 
</flex>

Answer 6

你的部件被包裹成需要同样Flexbox的造型至垂直拉伸以及一个<flex>元件，从而允许它的内容与它伸展。因此，将class="d-flex flex-column flex-grow"添加到<flex>将起作用。这是一个your plunker example的工作分支。

Answer 7

您可以使组件增长以填充其容器，然后将其作为弹性列以使内容也将增长。为此，请使用：host来定位组件元素。

flex.component.ts

@Component({ 
    selector: 'flex', 
    template: ` 

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

    `, 
    styles: [':host {flex: 1 0 auto; display: flex; flex-direction: column }'] 
    }) 

我已经更新了plunk。