2014-02-14 2 views
0

부트 스트랩 모달 상자가 있습니다. 나는 그것이 화면의 오른쪽에 붙어 있기를 원한다. 나는 시도 때라도하지만 크기를 다시 할 때 윈도우는 당신이이 점에서 나를 도와주세요 수 있습니다!오른쪽의 부트 스트랩 모달 상자가 작동하지 않습니다.

<div id='test'> 
    <div id="add_pixel" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    </div> 
</div> 

#add_pixel{ 
    position: absolute; 
    right: 0; 
} 

을 :(작동하지 않습니다하지만이 화면 오른쪽으로 이동하지 않습니다! 그것은 가치가있다 ! 내 CSS 파일이 부트 스트랩 CSS 파일 이후에 호출되는 것을

을 언급하지만 다음 코드는 잘 작동 :

<div id="id1"> 
    <div id='id2'> 

    </div> 
</div> 

#id1{ 
    background-color: yellow; 
    height: 400px; 
} 

#id2{ 
    background-color: red; 
    height: 200px; 
    width: 200px; 
    position: absolute; 
    right: 0px;   
} 

내가 알아낼 수가 잘 작동하는 반면이, 부트 스트랩의 모달 상자 작동하지 않는 이유 정규 DIV와 함께!

귀하의 도움에 감사드립니다!

답변

0

유일한 방법은 그것을하는 방법을 발견, 직접 bootstrap.css를 수정하는 것입니다.

는 .modal에 대한 규칙을 찾아 왼쪽 제거 : 0 파이어 폭스에서 비활성화 : 여기에 0

왼쪽과 bootstrap3 livedemo에서 예입니다.

내가 아는 한 CSS 규칙을 아무 것도 덮어 쓸 수 없습니다. 나뿐만 아니라이 문제를 많이 가지고 있었다

Try it out by yourself

0

그러나이 다음 스타일은 전체 모달 패널 주위에 보더를 맞게했다.

#clams-modal{ 
    position:fixed; 
    margin:0px auto; 
    width:auto; 
    z-index:100001; 
    left:22px; 
    right:22px; 
    top:22px; 
    bottom:22px ; 
} 

어쩌면 귀하의 경우 자동으로 올바른 수정 작업을 만드는 핵심 요소가 될 것 같았다에 폭이 설정되는

#add_pixel{ 
    position:fixed; 
    margin:0px auto; 
    width:auto; 
    z-index:100001; 
    left:20%; 
    right:0px; 
    top:22px; 
    bottom:22px ; 
} 

같은 것을보십시오.

관련 문제