发表新帖
发表新帖

Using flexbox sticky footer with bootstrap

前端 未结
关注
4 669
一整个雨季
一整个雨季 2021-02-14 09:58

I\'m trying to use this sticky footer:

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

body{
  display: flex;
  min-height: 100vh;
相关标签:
4条回答
  • 鱼传尺愫
    2021-02-14 10:33

    Adding vertical height worked for me

    <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>
    0 讨论(0)
  • Happy的楠姐
    2021-02-14 10:40

    Bootstrap 4 now uses flexbox by default so it's easier to get a sticky (not fixed) footer w/o additional CSS for the flexbox. You just need to ensure the body has min-height...

    body {
  min-height: 100vh; 
}

    Then use the flexbox utility classes...

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

    Bootstrap 4 Flexbox Sticky Footer

    0 讨论(0)
  • 终归单人心
    2021-02-14 10:44

    I'd suggest to take out a bit of confusion since the snippet does not really match with the linked details. Plus it has a typo. Just to let the framing tags work as fix points.

    <body class="d-flex flex-column">
  <nav></nav>
  <section class="container-fluid flex-grow-1"></section>
  <footer></footer>
</body>
    0 讨论(0)
  • 一个人的身影
    2021-02-14 10:48

    You need to give the flexbox item a width of 100%.

    In this case, that would be that .content element:

    Updated Example

    body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.content {
    flex: 1;
}
@media only screen and (max-width: 768px) {
    .content {
        width: 100%;
    }
}
    0 讨论(0)
 看不清?
提交回复
热议问题