Bootstrap 导航栏导致右侧出现间距

Question

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

我在 codepen 上找到了一个主题，我正在根据 freecodecamp 的一些提示对其进行修改，以便更好地理解 bootstrap。我为这最后一件简单的事情而焦头烂额。

导航栏在整个网站的右边缘创建不必要的白色 space。

它出现在这里：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

如果你想更好地理解导航栏，试试这个link，它非常简单明了。试一试http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Answer 2

在body中添加overflow-x: hidden;即可解决。
P.s：问题不是由导航栏引起的（删除它，问题仍然存在），但现在有太多代码无法告诉它。

Answer 3

您的问题实际上不是来自导航：它是城市景观的正确填充。 .col- classes 得到一个 padding-right，所以你的 main #about .row.pt-30 div.

右边有填充

有多种方法可以解决这个问题。搜索SO会给你很多人推荐你加个"no right padding" class, like

.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>

Bootstrap 导航栏导致右侧出现间距

Bootstrap Navbar causing spacing on the right hand side

html

css

navbar

twitter-bootstrap