2014-06-21 12 views
1

저는 웹 프로그래밍에 익숙하지 않아서 웹 사이트를 만드는 데 몇 가지 템플릿을 사용했습니다.이 모든 템플릿은 Twitter 부트 스트랩과 관련이 있습니다.부트 스트랩 모달이 부트 스트랩 버전에 따라 표시되거나 표시되지 않음

내 로그인 페이지에 부트 스트랩 모달이 올바르게 표시됩니다. 다음은 내가 사용한 수입품입니다.

<link rel="stylesheet" href="css/bootstrap.css" /> 
<link rel="stylesheet" href="css/bootstrap-responsive.css" /> 
<link rel="stylesheet" href="css/custom.css" /> 
<link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.js"></script> 

문제는 로그인 후 메인 페이지로 시작됩니다. 다른 템플릿에서 가져 와서 다음 가져 오기를 사용합니다.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="css/custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/> 
<link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.js"></script> 

변경된 사항은 부트 스트랩 원본뿐입니다. 첫 번째 경우에는 css 폴더에 다운로드했지만 두 번째 경우에는 서버에서 직접 가져 왔습니다.

결과적으로 모달은 기본 페이지 (두 번째 페이지)에 표시되지 않습니다. 화면이 검은 색으로 희미하지만 모달은 표시되지 않습니다. 내가 대신 서버의 CSS 폴더에서 부트 스트랩을 메인 페이지의 수입을 수정할 경우

enter image description here

의 조동사가 보여,하지만 전체 페이지의 레이아웃을 망쳐 :

<link rel="stylesheet" href="css/bootstrap.css" /> 
<link rel="stylesheet" href="css/bootstrap-responsive.css" /> 
<link rel="stylesheet" href="css/custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/> 
<link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.js"></script> 
대신이의

enter image description here

:

enter image description here

아이디어가 있으십니까?

+0

그래, 내 로컬 부트 스트랩이 v2.3.2이고 서버의 부트 스트랩이 v3.1.1 인 것을 확인해 보았습니다. 그런 차이를 만들 수 있습니까? –

답변

0

일부 연구를 마친 후 다른 사람들이 내 문제를 해결 했으므로 다른 사람들에게 도움이되기를 바랍니다.

이 포스팅은 실제로 그것을 해결

: here

분명히 부트 스트랩 3 모달 구문이 다른 다른 것들 사이에 그것은이 라인을 포함한다 :

<div class="modal-dialog"> 
<div class="modal-content"> 

그래서 나는 아래의 예를했다을 링크, 내 목적을 위해 그것을 조정하고 그것은 효과. 문제 해결됨.

0

페이지의 헤드 태그에 반응 형 메타 태그를 추가 했습니까? 그렇지 않다면 다음 메타 태그를 페이지의 헤드 태그에 추가하십시오.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

희망이 당신의 문제를 해결합니다.

참고 : 먼저 부트 스트랩 다운로드 파일을 가져 오는 버전을 추가하십시오.

+0

불행히도 도움이되지 않았습니다. 화면은 여전히 ​​모달이없는 검은 색으로 변합니다. 하지만 이미 해결책을 찾았습니다, 고마워요. –

관련 문제