Bootstrap Grid-System arbeitet seltsam

Question

Dies ist mein Code:

<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 "> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <div class="panel-title">Sign In</div> 
      <div class="forget"><a href="#">Forgot password?</a></div> 
     </div> 

     <div class="panel-body" > 
      <div id="login-alert" class="alert alert-danger col-sm-12"></div> 
      <form id="loginform" class="form-horizontal" role="form"> 
       <!-- id/pw --> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
        <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email"> 
       </div> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
        <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> 
       </div> 

       <div class="form-group"> 
        <!-- Button --> 
        <div class="col-sm-12 controls"> 
          <div class="row"> 
           <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a> 
           <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a> 
          </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-md-12 control"> 
         <div class="signup"> 
          Don't have an account? 
          <a href="#" id="signuplink"> 
           Sign Up Here 
          </a> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> <!-- <div style="padding-top:30px" class="panel-body" > --> 
    </div> 
</div> 

Das einzige, was ich geändert ist <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">

Und hier ist vor/nach:

Bevor ich eingefügt col-md-6 col-md-offset-3, sieht die blau schattierte Box ausgewogen aus. Nachdem ich col-md-6 col-md-offset-3 eingefügt habe, sieht es unausgewogen aus.

Warum passiert das? Ich denke, dass Gitter sollte gut funktionieren (Login-Box in der Mitte angeordnet werden sollte“, weil es bedeutet,` 3 (Offset) - 6 -.. 3 (Offset)‘

Ihre Hilfe brauchen

Answer 1

Sein, weil Ihr loginbox tut nicht mehr als 12 Spalten insgesamt haben, wie Sie 6 + 3 (Offset) angegeben = 9

ich würde auf diese Weise als ich wie unter Verwendung von Offset

<div class="col-md-3 "></div> 
<div id="loginbox" class="mainbox col-md-6"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <div class="panel-title">Sign In</div> 
      <div class="forget"><a href="#">Forgot password?</a></div> 
     </div> 

     <div class="panel-body" > 
      <div id="login-alert" class="alert alert-danger col-sm-12"></div> 
      <form id="loginform" class="form-horizontal" role="form"> 
       <!-- id/pw --> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
        <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email"> 
       </div> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
        <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> 
       </div> 

       <div class="form-group"> 
        <!-- Button --> 
        <div class="col-sm-12 controls"> 
          <div class="row"> 
           <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a> 
           <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a> 
          </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-md-12 control"> 
         <div class="signup"> 
          Don't have an account? 
          <a href="#" id="signuplink"> 
           Sign Up Here 
          </a> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> <!-- <div style="padding-top:30px" class="panel-body" > --> 
    </div> 
</div> 
<div class="col-md-3 "></div> 

Answer 2

Hier ist mein nehmen nicht: gibt es einen Flüssigkeitsbehälter und eine paar zusätzliche Reihen zu zentrieren Dinge:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="brown-row col-md-8 col-md-offset-2"> 
     <div class="row"> 
     <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 "> 
      <div class="panel panel-info"> 
      <div class="panel-heading"> 
       <div class="panel-title">Sign In</div> 
       <div class="forget"><a href="#">Forgot password?</a></div> 
      </div> 

      <div class="panel-body"> 
       <div id="login-alert" class="alert alert-danger col-sm-12"></div> 
       <form id="loginform" class="form-horizontal" role="form"> 
       <!-- id/pw --> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
        <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email"> 
       </div> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
        <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> 
       </div> 

       <div class="form-group"> 
        <!-- Button --> 
        <div class="col-sm-12 controls"> 
        <div class="row"> 
         <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a> 
         <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a> 
        </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-md-12 control"> 
        <div class="signup"> 
         Don't have an account? 
         <a href="#" id="signuplink"> 
           Sign Up Here 
          </a> 
        </div> 
        </div> 
       </div> 
       </form> 
      </div> 
      <!-- <div style="padding-top:30px" class="panel-body" > --> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

und CSS:

body { 
    background: #634a16; 
} 
.brown-row { 
    background: #9e7623; 
} 
#loginbox { 
    margin-top: 50px 
}