- 首页
- 前端开发
- 如何使用 Bootstrap 4 flexbox 填充可用内容?
如何使用 Bootstrap 4 flexbox 填充可用内容?
[英] How to use Bootstrap 4 flexbox to fill available content?
本文介绍了如何使用 Bootstrap 4 flexbox 填充可用内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用 bootstrap 4 的 angular 应用程序.我有一个导航栏固定在顶部，我想添加填充浏览器中剩余空间的内容.除了顶部的导航栏，我还有另一个 div，它本身包含页眉和页脚内容.在页眉和页脚之间，我有一个主要内容部分，我希望该部分(在下面的示例中为 #two)填充所有空白空间.
我以为我可以使用 css flexbox 来实现这一点，但是当我进入 bootstrap 世界时，我的简单非引导 flexbox 示例似乎什么也没做.我正在使用
这是我目前正在查看的整个角度分量:
<div id="one" class="">标题内容 <br>另一行 <br>而另一个
<div id="two" class="bg-info h-100 flex-grow">我想扩展以覆盖剩余可用高度的主要内容
<div id="三"类="">页脚内容
这是显示导航栏和注入点的应用程序容器:
<nav class="navbar navbar-toggleable-md sticky-top bg-faded"><a class="navbar-brand" href="#"><h1 class="navbar-brand mb-0">我的应用</h1></a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" routerLink="/flex">我的弹性视图</a></li></nav><路由器插座></路由器插座>
如何让 #two div 扩展以填充空间，同时让 #one 和 #three div 作为内容页眉和页脚锚定到内容区域的顶部和底部?
解决方案
更新 Bootstrap 4.1.0
flex-grow-1 和 flex-fill 类包含在 Bootstrap 4.1.0 中
更新 Bootstrap 4.0.0
像这样添加一个 flex-grow 类:
.flex-grow {弹性:1 0 自动；}
然后，实用程序类可用于布局的其余部分:
<nav class="navbar navbar-toggleable-md sticky-top bg-faded"><a class="navbar-brand" href="#"><h1 class="navbar-brand mb-0">我的应用</h1></a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link">项目 1</a></li></nav><div id="outer" class="d-flex flex-column flex-grow"><div id="one" class="">标题内容<br>另一行<br>而另一个
<div id="two" class="bg-info h-100 flex-grow">我想扩展以覆盖剩余可用高度的主要内容
<div id="三"类="">页脚内容 40px 高度
https://www.codeply.com/go/3ZDkRAghGU
这是 Bootstrap 4.3.1 上的另一个示例，它具有导航栏、侧边栏和带有滚动内容区域的页脚:https://www.codeply.com/go/LIaOWljJm8
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.
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.
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.
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>
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?
解决方案
Update Bootstrap 4.1.0
The flex-grow-1 and flex-fill classes are included in Bootstrap 4.1.0
Update Bootstrap 4.0.0
Add a flex-grow class like this:
.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
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屋！
查看全文
