网站添加CSS后页面四周出现空白，Bootstrap处理无效求助

问题根源 #

1. 错误使用container-fluid类：container-fluid是Bootstrap的容器组件类，用于包裹页面内容，不能直接应用在body标签上，这会导致样式冲突，无法解决空白问题。
2. body的默认样式与自定义padding：浏览器默认给body设置了margin，加上你自定义的padding: 100px，双重作用下会放大页面四周的空白区域。

修复步骤 #

• 移除body上的container-fluid类：将该类移到页面内容的外层容器div上，示例结构如下：

  <body>
    <div class="container-fluid">
      <!-- 你的页面内容 -->
    </div>
  </body>
  

• 重置body的默认边距并调整内边距：修改CSS，清除body的默认margin，同时根据需求调整padding（如果不需要四周留白可直接设为0）：

  body {
    margin: 0; /* 清除浏览器默认margin */
    padding: 0; /* 按需调整，比如保留留白可改为合适数值 */
  }
  

完整修改后的代码示例 #

CSS部分

body {
  margin: 0;
  padding: 0; /* 可根据需求调整为你需要的数值 */
}

.range {
  position: relative;
  width: 70%;
  height: 1%;
}

.range input {
  width: 100%;
  position: absolute;
  top: 0.5px;
  height: 0.5px;
  appearance: none;
}

.range input::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: -5px 0 0;
  border-radius: 50%;
  background: #135697;
  cursor: pointer;
  border: 0 !important;
}

.range input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  margin: -5px 0 0;
  border-radius: 50%;
  background: #135697;
  cursor: pointer;
  border: 0 !important;
}

.range input::-ms-thumb {
  width: 15px;
  height: 15px;
  margin: -5px 0 0;
  border-radius: 50%;
  background: #135697;
  cursor: pointer;
  border: 0 !important;
}

.range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input:focus {
  background: none;
  outline: none;
}

.range input::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.range-labels {
  margin: -2.5% -6% 1%;
  padding: 0;
  list-style: none;
}

.range-labels li {
  position: relative;
  float: left;
  width: 11.95%;
  text-align: center;
  color: #b2b2b2;
  font-size: 14px;
  cursor: pointer;
}

.range-labels li::before {
  position: absolute;
  top: -23px;
  right: 0;
  left: 0;
  content: "";
  margin: 0 auto;
  width: 0px;
  height: 0px;
  background: #b2b2b2;
  border-radius: 50%;
}

.range-labels .active {
  color: #135697;
}

.range-labels .selected::before {
  background: #135697;
}

.range-labels .active.selected::before {
  display: none;
}

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<body>
  <div class="container-fluid">
    <!-- 你的页面内容 -->
  </div>
</body>

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