2012-02-19 2 views
0

내가 만든 내 자신의 .subnav-fixed (같은 트위터의 부트 스트랩 워드 프로세서, css의) : 나는 다른 요소는 위치와 같은 방법으로 그 위치를 시도Twitter의 부트 스트랩에 추가 subnav를 올바르게 배치하는 방법은 무엇입니까?

@media (min-width: 980px) { 
    .subnav-fixed { 
    background-image: url(pic146x120.png); 
    height: 146px; 
    width: 120px;  
    position: fixed; 
    top: 0px; 
    left: 0; 
    right: 0; 
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ 
    } 
} 

과 :

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <div class="row offset1 span6"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 

      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="index.html">Project</a> 
     <div class="nav-collapse"> 
      <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="subnav-fixed offset1 span6"> 
     test test test test test test test test test test test test test test test 
    </div> 
    </div> 
</div> 

으로 그러한 코드 (offset1 span6) 내 .subnav-fixed은 브랜드가있는 왼쪽에서 동일한 위치에있을 것으로 기대합니다. 하지만 실제로 그렇지 않습니다 - demo.

+0

는 정확히 어디 당신은 당신의'subnav-fixed' div의 위치를 ​​찾고 계십니까? –

+0

@AndresIlich, OK, 위의 질문에서 저는 단순화 된 접근 방식을 사용했습니다. 바로 브랜드 프로젝트와이 .subnav 고정형을 왼쪽 정렬했습니다. 그러나 최종 목표 위치는'.well' 다음에 있어야합니다. '.well'에는'offset1 span7'이 있기 때문에 내'.subnav-fixed' - http://jsbin.com/azirid/9에'offset8 span2'을 사용해야한다고 생각합니다. 예상했다. –

+0

'position : fixed' 속성은 문서의 자연스러운 흐름에서 요소를 제거합니다. 따라서 부트 스트랩의 모든 배치 클래스가 전혀 예상대로 작동하지 않습니다. 그래서, 당신은 div를 수동으로'top, left, bottom, right' 속성을 적절하게 사용하여이를 보완해야합니다. –

답변

관련 문제