Question

我知道还有其他问题可以解决这个问题。但是，我已经尝试过它们，似乎没有任何东西适用于我的特定问题。我也注意到大多数都很老，而且引导程序在那个时候有所改变。所以我再问一次。道歉。

我在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

如果您希望在导航栏中获得更好的理解，请尝试此链接，它非常简单明了。试一试http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Answer 2

只需将 overflow-x：hidden; 添加到正文即可解决。
P.s：问题不是由导航栏引起的（删除它，问题仍然存在），但现在有太多的代码要告诉它。

Answer 3

你的麻烦实际上并非来自导航：它正好在城市景观上填充。 .col-个类获得padding-right，因此main #about .row.pt-30 div右侧有填充。

有各种方法来解决这个问题。搜索SO会给你很多人推荐你添加一个＆＃34;没有正确的填充＆＃34;类，像

.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 Navbar导致右侧间距

3 个答案: