Bootstrap Affix Plugin bricht Navigationsleiste

Question

So versucht, ich habe in der Navigationsleiste zu erkunden und Plugin von Twitter Bootstrap anbringen und ich habe schien unten, um ein Problem in der Probe Foto gestoßen:

Irgendwie bricht die rechte Seite der Navigationsleiste auf dem zweiten Foto und geht zur nächsten Zeile.

<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; 
} 

Ich weiß nicht genau, was falsch mit meinem Code ... Vielleicht kann euch helfen! Vielen Dank!

Answer 1

Stellen Sie Ihren Affix auf volle Breite und überprüfen Sie.

.affix{ 
width:100% 
}