2013-07-12 6 views
0

는 내가 반응 템플릿을 만드는 초보자 그리고 난이 사이트가 마음에 부트 스트랩 응용 프로그램 레이아웃을 생성 할 http://wrapbootstrap.com/preview/WB0F35928부트 스트랩 사이드 바 및 콘텐츠 폭

주요 사업부 사이트처럼 보이는 사이드 바 및 콘텐츠 사업부 것 내가 위에서 언급했듯이,

문제는 내가 직접 페이지에 적용했을 때 반응 형 부품이 작동하지 않는 것입니다. 반응 형이 아닌 일반 템플릿과 같습니다. 반응 형 템플릿에 대한 모든 js 요구 사항을 이미 갖지만 아직 작동하지 않습니다.

여기 내 HTML 코드입니다 :

<div class="sidebar"> 
    <ul style="background:#aaa; margin-left:0 !important;"> 
    <li>list1</li> 
    <li>list2</li> 
    </ul> 
</div> 

<div class="content"> 
    <div class="container-fluid"> 
     This is a sample content 
    </div> 
</div> 

CSS : 부트 스트랩 - responsive.css에서

.sidebar{ 
display:block; 
} 
.sidebar > ul{ 
margin:10px 0 0; 
padding:0; 
position:absolute; 
width:220px; 
} 
.content{ 
margin-right:0; 
margin-left:220px; 
min-height:740px; 
padding-bottom:0 !important; 
position:relative; 
width:auto; 
background:#fff; 
} 

내가이 넣어

트위터 부트 스트랩을 위해

@media (max-width: 767px){ 
.content{ 
    margin-left:0 !important; 
} 
} 
@media (max-width: 767px){ 
.sidebar{ 
    float:none; 
    width:100%; 
    } 
.sidebar > ul{ 
    width:100%; 
    position:relative; 
} 
} 

답변

1

가 반응 할 수있는 당신을 부트 스트랩 JS 및 CSS 파일뿐만 아니라 다음과 같이 반응 형 CSS 파일을 사용해야합니다 :

<link rel="stylesheet" type="text/css" href="/AgTracker/resources/css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="/AgTracker/resources/css/bootstrap-responsive.min.css"/> 

이 두 파일을 사용하고 있습니까? 자세한 내용은 here을 참조하십시오.

+0

이미 해결되었습니다. 어쨌든 ...!^_ ^ – cfz

관련 문제