Bootstrap 4中mt-auto失效 无法实现粘性页脚问题求助

失效原因 #

• mt-auto要在弹性盒（flex）或网格（grid）布局的垂直方向才会自动填充剩余空间，实现推挤效果。你当前的<body>没有设置为flex布局，也没有占满视口高度，所以垂直方向的auto margin没有计算依据，自然不生效。
• 常规文档流中块级元素的垂直margin auto默认是0，只有水平方向auto可以实现居中，这是CSS的基础规则，不是Bootstrap类失效。

具体修改方案 #

1. 调整body的CSS样式，增加flex相关配置，让body占满整个视口高度，且内部元素按垂直方向排列：

body {
    /* 新增以下3行 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 原有样式保留 */
    padding-bottom: 20px;
    background-color: #24252A;
    font-family: 'Work Sans', sans-serif;
    color:#f7f7f7;
}

2. 将footer的mt-2替换为mt-auto即可实现粘性页脚效果：

<footer class="container mt-auto">
    <div>content</div>
    <div>content</div>
</footer>

其他间距类失效排查 #

如果mt-1、mb-2这类固定数值的间距类不生效，按以下顺序排查：

• 检查自定义CSS是否存在更高优先级的样式覆盖了Bootstrap的间距规则，你当前CSS中的通配符* {margin:0;}优先级和Bootstrap类相同，因为你是后引入自定义CSS，所以如果没有冲突的话Bootstrap类会覆盖通配符样式，不会失效。
• 检查浏览器缓存是否加载了旧的CSS文件，强制刷新页面后再测试。

内容的提问来源于stack exchange，提问作者questiontoansw