在 doc 和 Bootstrap v4(here)的问题中，我看不到任何支持flex-grow的计划，例如这样的语法：
<div cl="d-flex">
<div cl="flex-grow">
I use all the space left
</div>
<div>
I am a small text on the right
</div>
</div>
这里是我想创建的布局示例：
导出按钮始终位于右侧，导航按钮占用了所有剩余空间，因此看起来很干净。
是否有可能已经构建这样的布局?也许不建议?当然,有使用 CSS 的解决方法,但我正在寻找一个干净的解决方案,理想情况下使用 Bootstrap 类名只保证一致性。
45
使用.col作为简单的flex-grow: 1;。这里描述了https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div cl="container">
<div cl="row">
<div cl="col">
I use all the space left
</div>
<div cl="col-sm col-sm-auto">
I am a small text on the right
</div>
</div>
</div>
43
对于任何人来到这里从谷歌搜索（像我一样）。
由于 Bootstrap v 4.1 有flex-grow和flex-shrink实用程序，因为documentation说你可以这样使用它们：
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
这里有一个小例子
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div cl="d-flex flex-row">
<div cl="d-flex flex-grow-1 text-white justify-content-center bg-danger">
Grow 1
</div>
<div cl="d-flex flex-grow-0 text-white justify-content-center bg-success">
Grow 0
</div>
<div cl="d-flex flex-grow-1 text-white justify-content-center bg-danger">
Grow 1
</div>
</div>
1
我为此创建了一个类，我检查了 Bootstrap 文档，没有发现任何东西。
.flex-2 { flex-grow: 2 }
col-auto占用剩余的空间，但是如果您有多行，则空间将不会平均分配。这就是为什么flex-grow可以做到这一点。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处
评论列表（38条）