Bootstrap Affix Plugin打破导航栏

Question

所以我一直试图在Twitter Bootstrap的导航栏和附加插件上进行探索，我似乎在下面的示例照片中遇到了问题：

不知何故，第二张照片上导航栏的右侧会断开并转到下一行。

<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="100">
        <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#MainNavBar" aria-expanded="false">
                    <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" href="index.php"><?php echo $GLOBALS['SiteName']?></a>
            </div>

            <div class="collapse navbar-collapse" id="MainNavBar">
            <?php GetNavBar(); ?>
            </div>
        </div>
    </nav>

CSS

body {
background-color:#FFFFFF;
background-image: url('/img/road.jpg');
background-repeat: no-repeat;
height: 1000px;
}

affix {
    position: fixed;
    width:1040px;
}

.navbar { 
    margin-top: 15px;
    margin-bottom: 15;
    background-color: rgba(0, 0, 0, 0);
    margin-bottom: none;
}

.navbar .navbar-brand { color: #ecf0f1;}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: Red; }

.navbar .navbar-text {
  color: #ecf0f1;
}
.navbar .navbar-nav .nav-link {
  color: red;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ffbbbc;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar .navbar-toggle { 
  border-color: #c0392b;
}
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { 
  background-color: #c0392b;
}
.navbar .navbar-toggle .navbar-toggler-icon { 
  color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ecf0f1;
}
.navbar .navbar-link {
  color: #ecf0f1;
}
.navbar .navbar-link:hover {
  color: #ffbbbc;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffbbbc;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffbbbc;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffbbbc;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffbbbc;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffbbbc;
    background-color: #c0392b;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ffbbbc;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ffbbbc;
  background-color: #c0392b;
}

我不知道我的代码有什么问题......也许你们可以提供帮助！谢谢！

Answer 1

将你的词缀设为全宽并检查。

.affix{
width:100%
}