부트 스트랩 부착 플러그인 깨는 탐색 모음

Question

그래서 탐색 모음에서 탐색하고 트위터 부트 스트랩의 플러그인을 부착하려고 노력하고 난 아래의 샘플 사진에 문제가 발생했을 듯했습니다 :

을

어떻게 든 두 번째 사진의 탐색 모음 오른쪽이 부러지고 다음 줄로 이동합니다.

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