当调整大小时，Bootstrap登录屏幕固定

Question

所以我在这里试图通过bootstrap创建一个登录屏幕，但是当我调整它的大小时，我似乎不知道要保持相同的位置（只是越来越小）。有什么建议？我试图把它们放在一个容器div，宽度：100％和中心，似乎没有任何工作。

/* heres the css: */ 
 

 
.login-form { 
 
    margin: 25px auto 25px auto; 
 
    width: 25%; 
 
    background-color: white; 
 
    padding: 150px 50px 50px 50px; 
 
    box-shadow: 1px 5px 2px #330000; 
 
    z-index: -1; 
 
} 
 
    
 
.form-group { 
 
    margin-bottom: 15px; 
 
} 
 
    
 
#logo { 
 
    background-color: white; 
 
    background-size: 170px auto; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    max-width:100%; 
 
    height: 192px; 
 
    width: 192px; 
 
    margin: 22px auto auto auto; 
 
    padding: 0px; 
 
    border: 5px solid white; 
 
    box-shadow: 1px 3px 2px grey; 
 
}

<div class="col-md-12"> 
 
    <div id="logo"> 
 
    <img class="img-responsive" src="uv.gif"> 
 
    </div> 
 
</div> 
 
<div class="login-form"> 
 
    <h1>United Volunteers</h1> 
 
    <div class="form-group" style="width:90%">   
 
    <div class="form-group"> 
 
    <label>Username</label> 
 
    <input type="text" class="form-input" placeholder="Username"> 
 
    </div> 
 
        
 
    <div class="form-group"><label>Password</label> 
 
    <input type="password" class="form-input" placeholder="Password"> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

给表格列的包装是这样的：

<div class="container-fluid"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div id="logo"> 
      <img class="img-responsive" src="uv.gif"> 
      </div> 
     </div> 
     <div class="col-md-offset-2 col-md-8 text-center"> 
     <div class="login-form"> 
      <h1>United Volunteers</h1>  
      <div class="form-group"> 
      <label>Username</label> 
      <input type="text" class="form-input" placeholder="Username"> 
      </div> 
      <div class="form-group"> 
      <label>Password</label> 
      <input type="password" class="form-input" placeholder="Password"> 
      </div> 
     </div> <!-- // login-form -->  
     </div> 

    </div> <!-- // row --> 
    </div> <!-- // container --> 
</div> <!-- // container-fluid --> 

CSS：

.login-form { 
    box-sizing: border-box; 
    margin: 25px auto; 
    background-color: white; 
    padding: 150px 50px 50px 50px; 
    box-shadow: 1px 5px 2px #330000; 
    z-index: -1; 
} 

.form-group { 
    margin-bottom: 15px; 
} 

#logo { 
    background-color: white; 
    background-size: 170px auto; 
    background-position: center center; 
    background-repeat: no-repeat; 
    max-width:100%; 
    height: 192px; 
    width: 192px; 
    margin: 22px auto auto auto; 
    padding: 0px; 
    border: 5px solid white; 
    box-shadow: 1px 3px 2px grey; 
} 

的jsfiddle：

https://jsfiddle.net/michaelyuen/r27pw3k7/1/

Answer 2

使用下面的代码：

<div class="container"> 
       <div class="card card-container">    
        <img id="profile-img" class="profile-img-card" src="uv.gif" /> 
        <p id="profile-name" class="profile-name-card"></p> 
        <form class="form-signin"> 
         <h1>United Volunteers</h1> 

       <div class="form-group" style="width:90%">   
         <div class="form-group">   <label>Username</label> 
         <input type="text" class="form-input" placeholder="Username"> 
         </div> 

        <div class="form-group"><label>Password</label> 
         <input type="password" class="form-input" placeholder="Password"> 
        </div> 
       </div> 
        </form><!-- /form --> 

       </div><!-- /card-container --> 
      </div><!-- /container --> 

CSS（改变样式，你的愿望）：

.card { 
     background-color: #fff; 
     /* just in case there no content*/ 
     padding: 20px 25px 30px; 
     margin: 0 auto 25px; 
     margin-top: 50px; 
     /* shadows and rounded borders */ 
     -moz-border-radius: 2px; 
     -webkit-border-radius: 2px; 
     border-radius: 2px; 
     -moz-box-shadow: 1px 5px 2px #330000; 
     -webkit-box-shadow: 1px 5px 2px #330000; 
     box-shadow: 1px 5px 2px #330000; 
    } 

    .profile-img-card { 
     width: 96px; 
     height: 96px; 
     margin: 0 auto 10px; 
     display: block;  

    }