在 bootstrap 中使用 flexbox 粘性页脚

Question

我正在尝试使用这个粘性页脚：

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

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

.content{
  flex: 1;
}

但它会扰乱 < 768px 宽度的渲染。

是否有任何简单的 css 修复程序可以使其适用于所有分辨率？

http://jsfiddle.net/2xvv5mod/

Answer 1

您需要给 flexbox 项目一个 width of 100%。

在这种情况下，就是 .content 元素：

Updated Example

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.content {
    flex: 1;
}
@media only screen and (max-width: 768px) {
    .content {
        width: 100%;
    }
}

Answer 2

Bootstrap 4 现在默认使用 flexbox，因此更容易获得粘性（未固定）页脚 w/o 附加 CSS弹性盒子。您只需要确保 body 具有 min-height...

body {
  min-height: 100vh; 
}

然后使用 flexbox 实用程序类...

<body class="d-flex flex-column">
  <nav></nav>
  <main class="flex-grow"></main>
  </footer></footer>
</body>

Bootstrap 4 Flexbox Sticky Footer

Answer 3

我建议消除一些混淆，因为该片段与 linked details 并不完全匹配。另外它有一个错字。只是为了让框架标签作为固定点。

<body class="d-flex flex-column">
  <nav></nav>
  <section class="container-fluid flex-grow-1"></section>
  <footer></footer>
</body>

Answer 4

添加垂直高度对我有用

<body class="d-flex flex-column min-vh-100">
    <nav>this is text</nav>
    <main class="flex-grow-1">this is text</main>
    </footer>this is text</footer>
</body>

在 bootstrap 中使用 flexbox 粘性页脚

Using flexbox sticky footer with bootstrap

css

twitter-bootstrap

flexbox