ブートストラップ接辞プラグインだから私は、ナビゲーションバーの上に探索し、Twitterのブートストラップのプラグインを固定しようとしていると私は下のサンプル写真で問題が発生しているように見えてきたナビゲーションバー

Question

を壊す：

何とか2番目の写真のナビゲーションバーの右側が壊れて、次の行に移動します。

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