调整大小时，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;       

    }