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

Posted 2023-03-06

技术标签:

【中文标题】如何使用 Bootstrap 4 flexbox 填充可用内容？【英文标题】：How to use Bootstrap 4 flexbox to fill available content? 【发布时间】：2018-01-20 09:02:19 【问题描述】：

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

我认为我可以使用 css flexbox 来完成此任务，但是当我进入 bootstrap 世界时，我的简单非引导 flexbox 示例似乎什么也没做。我正在使用these docs 试图解决这个问题。

我认为使用align-self-stretch 应该有助于实现这个目标，但看起来包含元素的大小可能刚好足以容纳我的#outer 内容，所以没有弹性框扩展要做。我天真地尝试将 height:100% 样式添加到包含的 div 中，只是为了尝试进行一些拉伸，但这似乎没有帮助。

我根据@ZimSystem 的回复创建了这个plunker example。他的 codeply 示例似乎完全按照我的意愿工作，但是当我尝试将更改拼凑到我的简单角度代码中时，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 div 充当内容区域的顶部和底部的内容页眉和页脚？

【问题讨论】：

当使用百分比表示高度时，确保所有的上升点也有一个高度，即html, body height: 100%; ...另一种选择我们使用视口单位，height: 100vh 在应用程序容器上 【参考方案1】：

更新 Bootstrap 4.1.0

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

更新 Bootstrap 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

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

【讨论】：

感谢您的示例。你的作品正如我所寻找的那样工作，但在plnkr.co/edit/TCMq9fI2XqtZNQ1S6OZQ?p=preview 进入一个简单的角度项目时，我似乎已经打破了它。有什么明显和你不一样的吗？我编辑了我的原始帖子以反映这个 plunker 示例。【参考方案2】：

您的组件被包裹在一个<flex> 元素中，该元素也需要相同的弹性盒样式才能垂直拉伸，从而允许其内容随之拉伸。因此，将class="d-flex flex-column flex-grow" 添加到<flex> 将起作用。这是your plunker example 的工作分支。

【讨论】：

【参考方案3】：

问题是，在 Angular plunker 中使用 ZimSystem's markup 时，该组件作为带有 flex 标签的附加容器插入到呈现的 HTML 中：

<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';  
    ...

【讨论】：

【参考方案4】：

如果你不能控制你正在使用的类的行为。只需将其全部删除并仅使用此 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>

【讨论】：

【参考方案5】：

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


.flex-grow 
  flex: 1;

添加一个包含您的内容块的包装器组件，并将flex-grow 类应用于您要填充剩余空间的那个。

【讨论】：

【参考方案6】：

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 谢谢：）

【讨论】：

【参考方案7】：

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

flex.component.ts