Question

当我在浏览器上预览我的网站时，我正在努力解决移动设备屏幕右侧出现的空白问题。我使用Bootstrap 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代码。在没有[class*="col"]的CSS中，设置.row类左右边距可以解决问题。但整个网站根据Bootstrap的.col类的左右填充缩小了。因此，我尝试通过减少这些填充来检索该空间（请参阅[class*="col"]），但空白区域的大小再次与[class*="col"]相同。

我被困住了。如果有人能帮我弄清楚发生了什么，请提前谢谢。

Answer 1

此问题是由于您根据Bootstrap的默认边距来管理站点中的边距所致。

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

CSS屏幕右侧的令人不快的空白区域

1 个答案: