Bootstrap容器超出页面视图问题排查及btn-block失效疑问

一、容器超出页面视图的解决办法 #

你的代码里，<main>直接嵌套了.row，而Bootstrap的.row自带负左右margin，没有外层容器（.container/.container-fluid）包裹时，就会导致内容超出页面宽度。

修复方案 #

给<main>添加.container-fluid类（或者在最外层.row外面套一层.container-fluid），同时去掉默认padding避免多余间距：

<main class="container-fluid p-0">
  <div class="row">
    <!-- 原有内容不变 -->
  </div>
</main>

也可以选择在最外层.row外直接包裹.container-fluid：

<main>
  <div class="container-fluid p-0">
    <div class="row">
      <!-- 原有内容不变 -->
    </div>
  </div>
</main>

以上两种方式都能抵消.row的负margin，让内容完全适配页面宽度。

二、btn-block 无法生效的原因 #

Bootstrap 5 已经移除了.btn-block类，这是官方的设计变更——从Bootstrap 4开始按钮默认采用flex布局，要实现按钮宽度100%的效果，直接用.w-100类即可，这也是官方推荐的替代方案。

补充说明 #

如果需要保留类似btn-block的自动换行行为，除了.w-100，还可以结合.d-block类，但通常.w-100就足够满足全屏宽度的需求。

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