如何清除Bootstrap网页右侧空白并保持响应式布局？

AI 小北

2026-7-6

解决网页右侧空白区域问题

问题根源

右侧空白是因为Bootstrap的.row类默认带有负左右边距（用于实现列间距），当.row未被包裹在.container或.container-fluid容器内时，会引发水平溢出，导致右侧空白或横向滚动条。仅设置body的margin:0和padding:0无法解决，因为问题出在.row的负边距上。

修复方法

遵循Bootstrap网格规范，所有.row必须放在.container或.container-fluid内部。若要内容铺满全屏，使用.container-fluid并移除默认内边距：

将卡片所在的.row包裹在<div class="container-fluid p-0">中
（可选）若要footer内的表单居中，可将表单也包裹在.container内

修正后代码

HTML关键修改部分

<!-- 导航栏后添加容器 -->
<div class="container-fluid p-0">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <!-- 原有卡片内容保持不变 -->
  </div>
</div>

<!-- footer可选优化 -->
<footer>
  <div class="container">
    <form>
      <!-- 原有表单内容保持不变 -->
    </form>
  </div>
</footer>

CSS代码（无需修改，保留原有内容）

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  width: auto;
}

body {
  margin: 0;
  padding: 0;
}

.navbar-nav {
  font-weight: lighter;
  margin: 0;
}

.card-text {
  color: #707070;
}

.card-img-top {
  height: 500px;
  object-fit: cover;
}

#form_title {
  text-align: center;
  padding-bottom: 15px;
}

#form_button {
  text-align: center;
}

b {
  font-weight: bold;
}

footer {
  background-color: #28a745;
  color: #fff;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
}