2012-11-13 7 views
1

최근에 TB 2를 다운로드했으며 자신에 익숙해지기 시작했습니다. 영웅 예제를 기반으로 한 페이지를 만들고 있습니다.트위터 부트 스트랩 모달 팝업 폼 - 표시된 양식을 낮추는 방법

나는 코드를 사용하여 페이지에 팝업 양식을 추가했습니다 (here). 지금까지 모든 것이 작동하는 것처럼 보입니다. 그러나 표시된 팝업 상자가 너무 높다고 생각합니다. 나는 그것을 조금 낮추고 싶다, 그래서 나는 (최소한), 표시된 양식의 상단을 볼 수있다.

CSS를 체크하기 위해 파이어 버그를 사용했습니다.

element.style { 
    display: block; 
} 
.modal.fade.in { 
    top: 50%; 
} 
.modal.fade { 
    top: -25%; 
    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s; 
} 
.fade.in { 
    opacity: 1; 
} 
.hide { 
    display: none; 
} 
.modal { 
    background-clip: padding-box; 
    background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    border-radius: 6px 6px 6px 6px; 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    left: 50%; 
    margin: -250px 0 0 -280px; 
    outline: 0 none; 
    position: fixed; 
    top: 50%; 
    width: 560px; 
    z-index: 1050; 
} 
.fade { 
    opacity: 0; 
    transition: opacity 0.15s linear 0s; 
} 

은 "확실한"것은 양식을 표시하는 요소에 선택기를 추가하고 새로운 CSS를 추가하는 것입니다 할 : 나는 스타일링 (주어진 순서대로)이 라인에서, 부트 스트랩에서 오는 발견 규칙을 내 외부 스타일 시트에 적용하거나 TB가 제공 한 스타일을 재정의하거나 사용자 정의 할 수 있습니다.

그러나 내가 무엇을하고 있는지 (내가 아직 TB를 배우고 있는지) 모르겠으므로, 지금까지 내가 가진 레이아웃을 깨뜨린 경우에 대비하여 여기에서 질문하는 것이 가장 좋습니다.

팝업 된 양식을 낮추어서 양식의 상단 부분을 볼 수있는 추천 방법은 무엇이며, 그 뒤에있는 Navbar를 조금만 볼 수도 있습니다 (이상적으로는 팝업 양식을 사용하고 싶습니다). navbar 메뉴 아래에 표시됩니다.하지만 너무 복잡 할 수 있습니다.)

답변

3

코드를 두려워하지 마십시오. 자신의 규칙을 지키고 맨 아래에 표시하십시오. 언제든지 나중에 제거 할 수 있습니다. 부트 스트랩 CSS 코드 자체를 편집하지 마십시오. 가장 낮은 코드는 이전 코드보다 우선합니다.

그리고 방화 폰 &을 사용하여 테스트 할 계산 스타일 패널 &입니다.

관련 문제