使用带有引导程序的flexbox粘性页脚

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

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/

Bootstrap 4现在默认使用flexbox,因此更容易获得一个粘性(非固定)页脚,而不需要额外的CSS for flexbox.你只需要确保身体min-height......

body {
  min-height: 100vh; 
}

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

Bootstrap 4 Flexbox Sticky Footer

你需要给那么Flexbox项width的100%.

在这种情况下,那将是该.content元素:

更新的示例

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