Bootstrap页面两侧空白问题：如何让页面占满全屏或铺满背景图？

嘿，完全可以实现你的需求！Bootstrap不仅能搞定这类表单布局，也能轻松调整页面让内容占满整个浏览器，或者让图片铺满页面。下面分两种情况给你具体方案：

Bootstrap默认的container类是居中且带左右内边距的，我们只需要做几个小调整就能让内容全屏：

• 把页面最外层的container替换成container-fluid，这个类会让容器自动占满整个视口宽度，默认带有15px的左右内边距；如果连这个内边距都想去掉，可以自定义CSS覆盖：

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

• 清除html和body的默认边距与内边距，同时让它们的高度占满视口：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

• 如果需要内容高度也占满整个页面（不只是宽度），给内容容器添加min-height: 100vh;的样式，这样不管内容多少都会撑满视口高度。

如果只是需要单张图片全屏显示，有两种实用方法：

方法1：用背景图片实现（推荐） #

这种方式能保持图片比例，还能灵活控制显示效果，不会出现拉伸变形：

.full-page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('你的图片路径');
  background-size: cover; /* 保持比例铺满容器 */
  background-position: center; /* 让图片居中显示 */
  background-repeat: no-repeat;
  z-index: -1; /* 把图片放到内容底层，不遮挡文字 */
}

然后在HTML里添加一个容器：

<div class="full-page-bg"></div>

方法2：用img标签实现 #

适合需要直接插入图片元素的场景，同样能保持图片比例：

<img src="你的图片路径" class="full-page-img" alt="全屏背景图">

对应的CSS样式：

.full-page-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：保持图片比例，避免拉伸 */
  z-index: -1; /* 置于内容下方 */
}

小提示：Bootstrap的表单组件在全屏布局下完全适用，你只需要把表单放在调整好的容器里即可。

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