Grow:如何使用 flex-grow

在 doc 和 Bootstrap v4(here)的问题中,我看不到任何支持flex-grow的计划,例如这样的语法:

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

这里是我想创建的布局示例:

image

导出按钮始终位于右侧,导航按钮占用了所有剩余空间,因此看起来很干净。

是否有可能已经构建这样的布局?也许不建议?当然,有使用 CSS 的解决方法,但我正在寻找一个干净的解决方案,理想情况下使用 Bootstrap 类名只保证一致性。

45

使用.col作为简单的flex-grow: 1;。这里描述了https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<link xxx="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>
43

对于任何人来到这里从谷歌搜索(像我一样)。

由于 Bootstrap v 4.1 有flex-growflex-shrink实用程序,因为documentation说你可以这样使用它们:

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

这里有一个小例子

<link xxx="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="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可以做到这一点。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(396)
Django小程序:Django-大序列化程序和小序列化程序之间的时间差
上一篇
服务器接口:登录到 Serv-U服务器的HTTPS接口
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(6条)