屏幕右侧的CSS不愉快的空白

Question

当我在浏览器上预览我的网站时，我正在与移动设备屏幕右侧出现的空白作斗争。我正在使用引导4作为主要的CSS文件。我阅读了许多关于同一问题的文章，并发现.row类的Bootstrap使其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类的左边距和右边距就解决了问题。但是，整个网站根据.col类Bootstrap的左、右垫子而缩小。因此，我试图通过减少这些填充(请参阅[class*="col"])来检索该空间，但空白再次出现，大小与[class*="col"]相同。

我被卡住了。如果有人能帮我弄清楚这是怎么回事，谢谢。

Answer 1

此问题是由于您如何管理您的站点中的空白，而不是默认的空白引导。

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