2014-09-04 2 views
3

getbootstrap.com에있는 것과 정확히 같은 사이드 바를 만들어야합니다. 나는 사이트에 있던 지침을 따라하고 사이드 바를 만들었다.부트 스트랩 사이트와 비슷한 사이드 바를 수정하는 방법은 무엇입니까?

하지만 문제는 꼬리말 내용이 겹쳐져 있다는 것입니다. 사이드 바를 스크롤하는 동안 내용이 스크롤되고, 꼬리말에 도달하면 접미사가 제거되지 않고 바닥 글 부분에 겹칩니다.

누군가이 버그를 해결할 수 있도록 도와 줄 수 있습니까? 나는 다음과 같은 CSS를 사용하고 난 다음 코드를 사용하고

,

<body data-spy="scroll" data-target="#leftCol"> 

    <div role="complementary" id="leftCol"> 
      <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="125"> 
       <li><a href="#feature1">Feature1</a></li> 
       <li><a href="#feature1">Feature1</a></li> 
       <li><a href="#feature1">Feature1</a></li> 
       <li><a href="#feature1">Feature1</a></li> 
      </ul> 
    </div> 
</body> 

/* Custom Styles */ 
ul.nav-tabs { 
width: 275px; 
margin-top: 30px; 
border-radius: 4px; 
border: 1px solid #ddd; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); 
} 
ul.nav-tabs li { 
margin: 0; 
border-top: 1px solid #ddd; 
} 
ul.nav-tabs li:first-child { 
border-top: none; 
} 
ul.nav-tabs li a { 
margin: 0; 
padding: 8px 16px; 
border-radius: 0; 
} 
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover { 
color: #fff; 
background: #0088cc; 
border: 1px solid #0088cc; 
} 
ul.nav-tabs li:first-child a { 
border-radius: 4px 4px 0 0; 
} 
ul.nav-tabs li:last-child a { 
border-radius: 0 0 4px 4px; 
} 
ul.nav-tabs.affix { 
top: 30px; /* Set the top position of pinned element */ 

} 

나는 this 링크에서 위의 코드를 언급했다.

미리 감사드립니다. 편집을 할

+0

문제를 재현 할 수있는 코드를 제공해 주시겠습니까? –

답변

0

: 또한 모든 CSS와 자바 스크립트 파일을로드 깜빡하지 않는

. 코드는 http://www.tutorialrepublic.com에서 테스트되었습니다.

+1

심각하게 ?? 당신은 하나의 태그에 두 개의 id를 공급합니다! –

+0

게시 후 내 게시물을 편집했습니다. 다시로드하십시오. – Kristiyan

관련 문제