Twitter 부트 스트랩에 대한 개체 크기 조정

Question

로그인 상자를 중앙에 놓고 싶습니다. 부트 스트랩에서 어떻게하는지 모릅니다. 누구나 할 수 있다고 할 수 있습니다.

아래에 작성한 코드는 다음과 같습니다. 제발 정정 해주세요

<div class="container-fluid"> 

    <div class="starter-template"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
     <button type="button" class="btn btn-primary btn-lg">Register</button> 
     <h3><strong>OR</strong></h3> 
    </div> 
<div class="col-sm-6"> 
    <form class="form-signin" style="text-align:center" role="form"> 
     <h2 class="form-signin-heading">Please sign in to Continue</h2>   
     <div class="col-lg-7"><input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required></div> 
     <div class="col-lg-7"><input type="password" class="form-control text-center" placeholder="Password" required></div> 
     <p><button class="btn btn-lg btn-primary" type="submit">Sign in</button> 
    </form> 
    </div> 
</div> 

Answer 1

로그인 사업부 만 집중화하려면 기본 부트 스트랩 그리드 표준을 따르십시오. 그리드는 12 개의 열로 나뉩니다. 6 열에 걸쳐있는 div를 가운데에 배치하려면 페이지의 맨 왼쪽부터 3 열이 있어야합니다. jsBin : Centered Login Div

: 즉 COL-SM은 오프셋-3 을 나는 코드 작업 변경

<div class="container-fluid"> 
<div class="starter-template text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project. 
     <br>All you get is this text and a mostly barebones HTML document.</p> 
    <button type="button" class="btn btn-primary btn-lg">Register</button> 
    <h3> 
     <strong>OR</strong> 
    </h3> 
</div> 
<div class="col-sm-offset-3 col-sm-6"> 
    <form class="form-signin text-center" role="form"> 
     <h2 class="form-signin-heading">Please sign in to Continue</h2> 
     <input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required> 
     <input type="password" class="form-control text-center" placeholder="Password" required> 
     <br> 
     <button class="btn btn-md btn-primary" type="submit">Sign in</button> 
    </form> 
    </div> 
</div> 

을 반영하도록 코드를 수정