2013-08-31 5 views
5

여기 내 디자인을 찾아주세요 : http://jsfiddle.net/2JGQa/부트 스트랩 3.0 : 고정 칼럼

내가 그렇게 할 수있는 방법을 내 헤더처럼 왼쪽 열 (포함 testlab_fr, 1ER 메일, ..., 10eme 메일)을 해결하고자 ?

나는 접사를 보았지만 사용 방법을 모른다.

<div class="row"> 
<div class="col-sm-4"> 
    <div class="row"> 
    <ul class="list-group"> 

      <li class="list-group-item"> 
      <span class="badge">175</span> 
      testlab_fr 
      </li> </ul> 
    </div> 
    <div class="row"> 

    <div class="list-group"> 


     <a href="http://localhost/mailbox/testlab_fr,26860-html" class="link_mail list-group-item active"> 
      <h4 class="list-group-item-heading">1er mail</h4> 
      <p class="list-group-item-text">il y a 1 hours</p> 
     </a> 
     <a href="http://localhost/mailbox/testlab_fr,25877-html" class="link_mail list-group-item"> 
      <h4 class="list-group-item-heading">10ème mail</h4> 
      <p class="list-group-item-text">il y a 2 heures</p> 
     </a> </div> 
    </div> 
</div><!-- /.col-sm-4 --> 

답변

3

현재 플러그인 접사에 대한 문서를 찾을 수 있습니다 : 당신이 (ID = "subnav"와 b.e.를) 컨테이너 사업부에 부착 할 http://getbootstrap.com/javascript/#affix 랩 그가 요소를.

이 컨테이너의 접미사를 Javascript 또는 Via 데이터 속성으로 설정하십시오.

javascript : $('#subnav').affix(); 또는 데이터 속성을 통해 : <div id="subnav" data-spy="affix">

요소가 고정 된 네비게이션에 겹치지 않기 때문에 상단 오프셋을 설정해야합니다. 상단 오프셋은 적어도 내비게이션 막대의 높이 여야합니다.

디자인에 바닥 글이있는 경우 하단 오프셋을 설정합니다. 첨부 된 요소가 바닥 글과 겹치기를 원하지 않기 때문입니다.

자바 스크립트 : $('#subnav').affix({offset:{top:150,bottom:150}}); 또는 데이터를 통해 속성 : <div id="subnav" data-spy="affix" data-offset-top="150" data-offset-bottom="150">

사용 CSS는 문서의 상단에있는 요소를 부착하기 : .affix{position:fixed;top:0px;}

더 많은 예제 : HTTP : https://github.com/twbs/bootstrap/pull/9902/files

+0

그것은 을 작동하지 않습니다 나는 이것을 시도 // jsfiddle. net/2JGQa/5/ 하지만 .... 왼쪽 상단을 수정하고 싶습니다. 어떻게 할 수 있습니까? – eXorus

+0

당신의 바이올린은 부트 스트랩의 자바 스크립트 플러그인과 누락 된 jQuery를 포함하지 않습니다. http://jsfiddle.net/2JGQa/7/ –

+0

네, 솔루션에 대해 감사드립니다. 하지만 내 디자인은 유연하므로이 방법으로 너비 : 225px를 사용하므로이 방법이 적합하지 않습니다. – eXorus

관련 문제