2012-05-24 4 views
11

로그인 화면을 배치하고 있으며 그 화면에서 LOGIN 및 PASSWORD가있는 상자로만 구성됩니다. 나는 전통적인 로그인 화면과 같이 수직 및 수평으로 중앙 집중화해야한다.트위터 부트 스트랩에 상자를 배치하는 방법

트위터 부트 스트랩으로 어떻게 이것을 할 수 있습니까?

감사합니다. 여기 예를 참조

<div class="row"> 
    <div class="span6 offset3"> 
    Your content goes here 
    </div> 
</div> 

:

답변

22

당신은 당신은 당신의 열을 상쇄 할 수, 부트 스트랩 그리드를 사용하는 경우 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

을 또는 당신은 단지 CSS 단순히 중앙 블록 요소를 사용할 수 있습니다

div.login-box{ 
    margin:0 auto; 
    width: 720px; 
} 
+0

그러나 :

<div class="row"> <div class="col-sm-6 col-sm-offset-3"> Your content goes here </div> </div> 

나 : 더 나은 아직 구문은 약간 다르다? – dennisbot

+0

간단히 다양한 CSS 미디어 쿼리를 사용하여 다양한 해상도에 대해 다양한 너비를 설정할 수 있습니다. 또는 너비 백분율로 실험 할 수 있습니다. 70 % – Johny

+0

첫 번째 옵션이 오프셋 (실제 중심이 아님)이고 두 번째 옵션이 부트 스트랩을 사용하지 않기 때문에이 질문에 대답하는 것으로 생각하지 않습니다. – felwithe

0

Johny의 답변에 대한 업데이트 : 부트 스트랩 3; 당신이 당신의 두 번째 방법으로 반응하는 동작을 달성 할 수있는,

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-sm-offset-3"> 
      Your content goes here 
     </div> 
    </div> 
</div> 
관련 문제