Question

因此，我使用Bootstrap 4作为框架为一家公司开发了一个网站。从一开始就致力于创建一个响应式网站，我完全不知道为什么所有设备的右侧都有巨大的空白（尺寸取决于设备分辨率）。

甚至删除了我认为是问题所在的部分代码（导航栏）。在删除网站的每个元素以尝试确定导致问题的原因之后，仍然没有运气。没有运气

我已将该站点上传到我的其中一个Web服务器，该服务器位于 www.adameastwood.co.uk/eg/index.html 忽略响应时间慢的问题，我获得了非常高分辨率的图像，但仍然没有解决缓存问题。

导航栏和标题的HTML：

  <!-- Navigation Look into as responsive is broken -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
    <div class="container">
      <img class=" js-scroll-trigger img-fluid paddingLogo" src="img/logo.png" href="#page-top"></img>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav text-uppercase ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#About">Warum PPG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#Advantages">Vorteile & Merkmale</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#Purchase">Kaufen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Kontakt</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="masthead mainImg">
    <div class="container">
      <div class="intro-text">
        <div class="intro-heading ">Willkommen bei</div>
        <div class="intro-lead-in">PowerPerformance Gloves</div>
        <!-- <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a> -->
      </div>
    </div>
  </header>

我不认为页脚或页眉是问题的根源，而是起点。谢谢您的帮助：）

问题图片 Iphone X res, white bar on right

Answer 1

似乎接触部分正在引起白色间隙。标题太宽了。您可以减小其长度，字体大小或在其上加上省略号。

尝试一下：

#contact .section-heading {
    text-overflow: ellipsis;
    overflow: hidden;
}

或者这个：

#contact .section-heading {
    font-size: 25px;
}

您将看到右侧的白色缝隙不再存在。

使用所有Bootstrap 4框架后，为什么我的网站没有响应

1 个答案: