html - CSS 屏幕右侧令人不快的空白

Question

当我在浏览器中预览我的网站时，我正在努力解决移动设备屏幕右侧出现的空白问题。我使用 Bootstrap 4 作为主要的 CSS 文件。我阅读了很多关于同一问题的帖子，发现 Bootstrap 的 .row 类正在使其 div 宽度比屏幕尺寸更宽。

这是我的代码:

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

.container-fluid>.container>.row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

[class*="col"] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

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

@media (min-width:992px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  [class*="col"] {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width:1200px) {
  .container {
    width: 1015px;
  }
}

<header class="container-fluid p-2 p-lg-0" id="hd">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-3 col-lg-2 pr-0" id="hd-1"><a href=<?php echo $lg. '/'; ?>><img src="assets/images/osi_logo_white.png" alt="OSi logo" class="img-fluid" id="hd-logo"></a>
      </div>
      <div class="col col-lg-8 text-uppercase mb-0" id="hd-2"><a href=<?php echo $lg. '/'; ?>><?php if($lg=='fr') echo 'photographe international africain'; else echo 'international african photographer'; ?></a></div>
      <div class="col text-right align-self-stretch align-self-lg-center d-flex flex-column justify-content-between" id="hd-3">
        <a href="<?php echo (($lg=='fr') ? str_replace('/fr/','/en/',$_SERVER['REQUEST_URI']) : str_replace('/en/','/fr/',$_SERVER['REQUEST_URI'])); ?>" class="media align-items-center">
          <span class="media-body"><?php if($lg=='fr') echo 'in english'; else echo 'en français'; ?></span>
          <img src="assets/images/<?php if($lg=='fr') echo 'uk.png'; else echo 'fr.png'; ?>" class="d-flex ml-1 ml-md-2" id="hd-lg">
        </a>
        <a href="#ft" class="d-lg-none">contacts</a>
      </div>
    </div>
  </div>
</header>

我解释一下。我放了一段 HTML 代码和一段与问题相关的 CSS 代码。在 CSS 中，没有 [class*="col"]，设置 .row 类的左右边距解决了这个问题。但是整个网站是根据Bootstrap的.col类的左右padding缩小的。因此，我试图通过减少这些填充来检索该空间(参见 [class*="col"])，但空白再次出现，大小与 [class*="col"].

我卡住了。如果有人可以帮我弄清楚发生了什么，在此先感谢。

Answer 1

问题是由于您根据 Bootstrap 的默认边距管理网站边距的方式造成的。

作为解决方案，我基于 Bootstrap 逻辑编写了自己的 CSS 框架，定义了我自己的类集并设置了我自己的边距。