Bootstrap固定页脚列宽不符预期：如何设置两列各占50%？
2026-5-15
问题分析与解决方案
你的问题核心在于Bootstrap栅格类的使用错误，导致两列无法各占50%宽度，具体原因和修复方案如下：
为什么当前代码不生效？
- 你使用的
col-xs是Bootstrap 3及更早版本的旧类名，在Bootstrap 4+中已经被废弃，替换为col-*的格式； - 即使是Bootstrap 3，
col-xs本身只是标记该列适配超小屏幕，但没有指定宽度占比——Bootstrap栅格系统是12列布局，要占50%宽度需要明确指定占6列（12/2=6）。
修复方案
根据你使用的Bootstrap版本，选择对应的代码修改：
如果你用的是Bootstrap 4或5
把HTML中的col-xs替换为col-6（col-6表示在所有屏幕尺寸下，该列占12栅格中的6列，也就是50%宽度）：
<footer class="container-fluid footer"> <div class="row"> <div class="col-6 text-center">Voltooid:<br>40/80 taken</div> <div class="col-6 text-center">Ongepland:<br>5 taken</div> </div> </footer>
如果你用的是Bootstrap 3
需要明确指定col-xs-6（xs对应超小屏幕，6表示占50%宽度）：
<footer class="container-fluid footer"> <div class="row"> <div class="col-xs-6 text-center">Voltooid:<br>40/80 taken</div> <div class="col-xs-6 text-center">Ongepland:<br>5 taken</div> </div> </footer>
额外提示
因为你的footer是position: fixed固定在底部，建议给页面的主内容容器或<body>添加padding-bottom，值等于footer的高度，避免页面底部内容被footer遮挡，比如：
body { padding-bottom: 60px; /* 假设footer高度是60px，可根据实际调整 */ }
内容的提问来源于stack exchange，提问作者Rémon van Nieuwenhuizen
