박스형 네비게이션 막대 부착 방법

Question

스크롤 할 때 내 네비게이션 바를 고정하기 위해 부착을 사용합니다.

그러나 스크롤 navbar 제대로 작동하지 않을 때.

저는을 사용하여 박스 모양을 헤더 웹 사이트에 제공합니다 (중앙 콘텐츠).

컨테이너가없는 헤더를 사용하면 헤더와 메뉴가 화면에 나란히 표시됩니다. 이 경우 부착 된 navbar는 똑같이 (1391px 너비를 가짐) 화면을 잘 맞출 수 있습니다.

그러나 Im은 <header class="container">입니다. 그리고 부착 된 navbar는 1391px 너비를 너무 가지고 가고 있기 때문에 스크린에서 다 떨어집니다. 사이드 - 투 - 사이드 웹 사이트처럼 보입니다. 컨테이너 너비에는 적합하지 않습니다.

해결 방법을 알고 계십니까?

또는

는 부트 스트랩 접사 그냥 뻗어 사이트없이 박스 사이트 종로입니다 그것은 무엇입니까?

이것은 탐색

<header class="container"> 
    <nav id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="222"> 
      <div class="container-fluid"> 
      <div class="navbar-header"><a class="navbar-brand" href="#">Home</a> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse navbar-menubuilder"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="dropdown" class="dropdown"><a href="3" class="dropdown-toggle" data-toggle="dropdown">Nosotros <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Misión, Visión y Objetivos</a> 
          </li>      
         </ul> 
        </li>      
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

내 HTML이며, 이것은 나에게 무슨 일이 일어나고 있는지 유사한 모습 here를 타고 CSS

header{ 
     border-top-width: 8px; 
     border-top-style: solid; 
     border-top-color: #888; 
    } 
    .affix { 

      position: fixed; 
      top: 0; 
      width: 100%; 
      z-index: 1; 
      right: 10%; 
      left: 10%; 
      } 

    .affix + .container-fluid { 
      padding-top: 70px; 


    } 

입니다. 결과 화면을 더 작게 만들어서 어떤 일이 일어나는지 확인하십시오.

Answer 1

코드가 없으면 코드가 어떻게 보이는지 추정 할 수 있습니다.

트위터 부트 스트랩의 navbar fixed navbar 예제를 사용하여 .navbar-fixed-top 오른쪽 및 왼쪽 값을 변경해야합니다. 0을 사용하면 좌우로 설정됩니다. (당신이 있는지 등을의 예 .navbar 오른쪽에 대한) 모두 정렬 수 있도록 그 후

@media (min-width: 768px) { 
    .navbar-fixed-top { 
     position: fixed; 
     right: auto; 
     left: auto; 
    } 
} 

, 당신은 부트 스트랩의 여백을 덮어 쓰기해야합니다. 당신은 #의 nav.affix 컨테이너의 크기를 따르십시오, 더 큰 화면에서 https://jsfiddle.net/jennift/o7utddud/2/

Answer 2

:

는 바이올린을 참조하십시오. 왼쪽과 오른쪽에서 0을 사용하여 컨테이너를 가이드로 사용하고 컨테이너만큼만 "늘입니다".

작은 화면에서 컨테이너의 너비는 "자동"으로 고정 된 위치에서 왼쪽에서 오른쪽으로 늘어납니다. 20px의 패딩 (bootstrap CSS에서 사용)을 사용하여 헤더 컨테이너의 길이에 맞춰 재정렬 할 수 있습니다.

#nav.affix { 
    position: fixed; 
    top: 0; 
    left:0; 
    right:0; 
} 

@media (max-width: 767px) { /*controls on smaller screen*/ 
    #nav.affix { 
     left:20px; /*20px to follow bootstrap body padding */ 
     right:20px; 
    } 
} 

바이올린 : http://jsfiddle.net/jennift/hnkutxsn/3/이