html - 两个宽度相同的div不相同

Question

你好，我有这两个宽度大小和百分比相同的 div 标签，但是每次我缩小屏幕时，底部的标签似乎都变长了。有什么想法吗？

<div class="container-fluid">
          <div id="logo">
          <img class="img-responsive" src="uv.png">
          </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> <!-- // container-fluid -->

<div class="container-fluid">

      <button type="submit" class="btn-login">Log in</button>

    <div class="signup-form">
      <label style="text-align:center;margin-bottom:20px">Create an Account</label>

      <label style="text-align:center;margin-bottom:20px;margin-top:100px">or</label>
    </div>
</div>

<div class="container-fluid">
      <button type="submit" class="btn-signup">Sign Up Free</button>
</div>

.login-form {
    top:50px;
    position:relative;
    box-sizing: border-box;
    margin: 25px auto;
    margin-bottom:0px;
    width: 100%;
    max-width:400px;
    background-color: white;
    padding: 130px 50px 50px 50px;
    box-shadow: 1px 5px 2px #330000;
    z-index: -1;
}

.signup-form {
    top:-40px;
    position:relative;
    box-sizing: border-box;
    margin: 25px auto;
    margin-bottom:0px;
    width: 100%;
    max-width:400px;
    background-color: white;
    padding: 50px 50px 50px 50px;
    box-shadow: 1px 5px 2px #330000;
    z-index: -1;
}

#logo {
    top:50px;
    left: 50%;
    transform: translateX(-50%);
    position:absolute;
    background-color: white;
    background-size: 170px auto;
    background-position: center center;
    background-repeat: no-repeat;
    max-width:100%;
    height: 200px;
    width: 200px;
    padding: 0px;
    border: 5px solid white;
    box-shadow: 1px 3px 2px grey;
}

h1 {
    font-size: 30px;
    font-family:Candara;
    text-align: center;
    margin: 100px auto 50px auto;
}

a {
    text-decoration: none;
}

.social_media {
    text-align:center;
    position:relative;
    top:-75px;
}

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

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-family:Candara;
    font-size: 16px;
}

.form-input {
    width: 100%;
    display: block;
    height: 25px;
    padding: 6px 12px;
    font-size: 12px;
    font-family:Candara;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f2f2f2;
    line-height: 1.5;
}

第一个截图是最大化的，第二个是 Bootstrap 版本

Answer 1

检查这个fiddle

.login-form-container {
  padding: 0;
}

我将此类添加到您的 .login-form 的父级中