BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

BootStrap.css 在手机端滑动时右侧出现空白的原因

问题描述

在使用BootStrap.css布局的网站，当在手机端滑动页面时，经常会出现右侧出现空白的问题，这个问题通常出现在使用了container或container-fluid类的元素上。这是因为在手机端，页面宽度比较小，而BootStrap.css默认使用的栅格（Grid System）是基于宽度划分的，因此在页面宽度小于一定值时，会导致未占用完整宽度的空白区域出现在页面右侧。

解决办法

1. 使用容器包裹

一种解决方法是使用一个新的容器包裹container或container-fluid类的元素，在这个容器上设置overflow-x: hidden，这样在手机端滑动页面时，容器会出现滚动条，而不是出现空白区域。

<div class="wrapper">
  <div class="container">
    <!-- 页面内容 -->
  </div>
</div>

.wrapper {
  overflow-x: hidden;
}

2. 自定义 CSS

另一种解决方法是自定义 CSS，将container或container-fluid类的元素的最大宽度设置为页面宽度，这样在手机端滑动页面时，就不会出现空白区域了。

<div class="container custom-container">
  <!-- 页面内容 -->
</div>

@media (max-width: 768px) {
  .custom-container {
    max-width: 100%;
  }
}

这里设置了一个媒体查询，只有在页面宽度小于等于 768 像素时，才会将最大宽度设置为 100%。

总结

以上两种方法都可以解决 BootStrap 在手机端滑动时右侧出现空白的问题，如果你对 CSS 比较熟悉，可以根据自己的需要选择其中一种方法。