2011-12-27 5 views
9

위의 http://jsfiddle.net/mjmitche/qVdEy/6/에서 popover 내의 텍스트 정렬이 완벽하다는 것을 알 수 있습니다. 그러나 내 사이트에 똑같은 CSS/js/html을 넣으면 텍스트가 컨테이너보다 큽니다! popover를 디버깅하는 방법은 무엇입니까?

enter image description here

나는 밖으로 불을 지르고를 사용하여 무슨 일이 일어나고 있는지 파악하기 위해 노력하고있어,하지만 난 불을 지르고를 사용하는 팝 오버 떨어져 내 커서를 이동해야하고 불을 지르고 사라집니다. 내 코드에서 프레젠테이션을 변경하는 설정이 무엇인지 파악할 수 없습니다. popovers는 Twitter Bootstrap.js를 사용하여 만듭니다 (바이올린의 리소스를 볼 수 있습니다)

+3

당신은 의심 할 여지없이 부트 스트랩과 자신의 CSS를 혼합하고 있습니다. 그런 다음 자신의 CSS가 부트 스트랩을 깨뜨린 것은 정말 간단합니다. –

+0

파이어 폭스의 어떤 버전을 사용하고 있습니까? 파이어 폭스 또는 크롬에서 동일한 문제가 발생하지 않습니다. – Gautam

+0

나는 당신이 그 문제에 대해 오해했다고 생각합니다. jsfiddle에 popover는 (나의 브라우저 및 너의 것에서) 그러나 나의 현지 위치에 (i에서만 볼 수있는) 완전하다 어떤 browders 상관없이, 부서진다. 내 로컬 사이트에서 코드를 볼 수 없습니다. – Leahcim

답변

2

popover CSS를 살펴본 후에는 글꼴 크기가 명시 적으로 정의 된 것 같습니다 : http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (" 팝 오버 "와 CSS를 통해 볼) 아마

다음 CSS를 추가하고 거기에서 그것을 조정하려고 : 도움 :

+0

기본 질문에 대한 대답입니다. 참고하시기 바랍니다. 질문에 대한 답은 아래의 요한의 대답을보십시오. – retrovertigo

4

은 내가 무엇을하는 종류의 이상한 만 보인다

.popover, .popover h3.title, .popover .content { font-size: 14px; } 

희망을 Chrome에서 작동하도록 방화범이 끌려. 단계는 다음과 같습니다

  1. 검사자의 확인 부분이 솟다 당신이 배경 창에있는 (활성화하려는 버튼을 확인하십시오 새 창에서 크롬 관리자를 열고
  2. 브라우저 창을 활성화하고 버튼 위로 마우스를 가져 가면 (팝업이 활성화 됨) 이제 관리자 창으로 전환하기 위해 alt + tab (OSX에서는 cmd +`)을 누르십시오.
  3. 그러면 mouseOut 이벤트가 트리거되지 않고 팝업창이 닫힙니다. DOM 본문 노드에 첨부되었습니다! dy에서 검사기 으로 이동하면 CSS 문제를 볼 수 있습니다.
+1

이 다소 도움이되었지만, 3 단계 후 마우스를 움직이면 마우스 아웃 이벤트가 실제로 활성화 된 창이 아니더라도 실제로 트리거됩니다. (그러나이 전에는 콘솔에 나타나지만, Chrome Inspector에서 사라지기 전에 스크롤 할 수 없으므로 요소를 보지 못합니다. – FireDragon

27

아무도 정말 ::: 간단히 이것은 내가 나의 새로운 HTML 상자 시각화 도구를 만든 물건의 종류 $('#element').popover('show')

+2

디버그 방법에 대해 묻는 질문의 답변이 제공되어야합니다. – Tariqulazam

+1

내가 찾고있는 것뿐입니다. – guilleva

+0

또한, Firefox DevTools에서는 Inspector에서 트리거 요소를 선택하고 "콘솔에서 사용"을 마우스 오른쪽 버튼으로 클릭하고 '$ (temp0) .popover ('show ')와 같은 작업을 수행 할 수 있습니다. ' – retrovertigo

0

입니다 >> 부하에 열 수있는 팝 오버를 설정 한 질문 "어떻게 팝 오버를 디버깅하기"를 대답하지 에 대한. 확인 해봐!

HTML Box Visualizer - GitHub

관련 문제