如何让container-fluid适配全屏宽度并移除左右空白间隙

问题描述 #

如何移除该div容器左右两侧的白色间隙？

你的代码 #

HTML代码 #

<div class="container-fluid">
  <div class="centered"><h1>Hello World</h1></div>
  <img
    class="img3"
    src="pictures/1920px-Parliament_of_Hungary_November_2017.jpg"
    alt=""
    style="width: 100%"
  />
</div>

CSS代码 #

.container-fluid {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 52px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

解决方案 #

出现白色间隙的核心原因是浏览器默认给<body>标签添加了margin值，另外你的.container-fluid定位也需要微调，按以下步骤修改：

• 重置body的默认边距和内边距，在CSS开头添加：

body {
  margin: 0;
  padding: 0;
}

• 调整.container-fluid的定位，确保它从页面最左侧开始布局：

.container-fluid {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 52px;
  left: 0; /* 新增这一行 */
}

修改后，容器就能完全铺满页面宽度，左右的白色间隙即可消失。

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