问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Bootstrap 4，使列表组可滚动，连续，带有弹性框，有或没有正文滚动

社区维基
1
新手上路，请多包涵

我正在使用 Bootstrap 4 （现在我使用的是 alpha-6）。

我有这种情况：

 <body>

  <!-- HERE I HAVE one div automatically generated with randomly ID and class -->

  <div class="bigone">

    <div class="container-fluid">

      <div class="header">
        My header
      </div>

    </div>

    <div class="mybar">
      Nav bar
    </div>

    <div class="main">
      <div class="container-fluid">
        <div class="row">

          <div class="col-6">
            <div class="card">
              <div class="card-header">
                Card Header
              </div>
              <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>

                <a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
              </div>
              <div class="card-footer">
                Card Footer
              </div>
            </div>
          </div>

          <div class="col-6">
            <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br>
            <h1>LAST LINE</h1>
          </div>

        </div>
      </div>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

  <!-- HERE THAT DIV CLOSED -->

</body>

这是 CSS ：

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

.main {
  flex: 1;
}

plnkr 上有一个演示： https ://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

当页面内容为空时，我需要将页脚放在底部，因此我正在使用： .bigone { height: 100vh; } 和 Bootstrap Flexbox 对齐实用程序，例如： <div class="bigone d-flex flex-column">

现在我需要 list-group 在 card 和 col-6 具有“这么多单词”到可滚动的底部高度页脚是。

简而言之： BODY 不能有滚动条。

我的页眉和页脚高度不是固定的，它们会发生变化。

如何？ 我不是 flexbox 专家。

我不需要 IE，只需要 Chrome。

重要：

我不能用这样的东西来固定我的卡片高度：

 height: calc(100vh - header.height - footer.height - etc...);

因为我的页眉、页脚等高度是动态变化的。

问题图片：

我需要的

原文由 user4412054 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssbootstraptwitter-bootstrap-3flexboxbootstrap-4
阅读 811
2 个回答
得票最新
社区维基
1
✓ 已被采纳

根据 规范，设置 flex: 1 （在 .main 元素上）等效于 flex: 1 1 0 ，简写为：

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

但是，由于某种原因， flex: 1 在您的代码中没有按预期工作。 （根据您的问题，我只检查 Chrome）。

但是，如果你给 .main 完整的简写形式——并使其成为一个 flex 容器并添加 overflow 你的布局似乎可以工作。

 .main {
    flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

修改后的 plunkr

参考：

编辑（基于对问题的更改）

我上面的回答从 body 中删除了滚动条，并为 .main 部分提供了一个垂直滚动条。

要使 .main 部分中的每一列都可以使用垂直滚动条，请进行以下调整：

 .main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}

修改后的 plunkr

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1
撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题