html - Bootstrap Navbar 导致右侧出现间距

Question

我知道还有其他问题可以解决这个问题。但是，我已经尝试过它们，但似乎对我的特定问题没有任何作用。我还注意到大多数都已经很老了，bootstrap 在那段时间发生了一些变化。所以我再问一次。抱歉。

我有一个在 codepen 上找到的主题，我正在修改它以根据 freecodecamp 的一些提示更好地理解 bootstrap。我正在为这最后一件简单的事情抓狂。

导航栏在整个网站的右边缘创建了不必要的空白区域。

它出现在这里:http://codepen.io/Er-c/pen/YGzkmG/

相关代码(我认为)

<nav class="navbar navbar-fixed-top">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <a class="navbar-brand page-scroll" href="#page-top">
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right links">
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li><a class="page-scroll" href="#about">About</a></li>
        <li><a class="page-scroll" href="#services">Services</a></li>
        <li><a class="page-scroll" href="#news">News</a></li>
        <li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
        <li><a class="page-scroll" href="#clients">Clients</a></li>
        <li><a class="page-scroll" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

我到底该怎么做才能消除右边的白色:

Imgur

我完全卡住了。

Answer 1

您的问题实际上不是来自导航:它是城市景观的正确填充。 .col- 类有一个 padding-right，因此在您的 main #about .row.pt-30 div 右侧有填充。

有多种方法可以解决这个问题。搜索 SO 会给你很多人建议你添加一个“没有正确的填充”类，比如

.dont-pad-me {padding-right: 0}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dont-pad-me">

但在这种情况下，我认为你只想替换

<div class="row pt-30">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#">
  </div>
</div>

与

<div class="container-fluid pt-30">
    <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#">
</div>