bootstrap登录表单重叠

时间：2015-12-16 05:50:36

标签： css twitter-bootstrap grid

我想创建不同的登录表单。如何将我的登录容器放在彼此之外？我尝试调整列网格，但它不起作用。我尝试添加col-sm-12并将col-sm-6添加到每个登录容器中。

<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="login-container">
        <div id="output"></div>
            <div class="avatar"></div>
                <div class="form-box">
                    <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
                        <input class="form-control" placeholder="Username" name="username" type="text">
                        <input class="form-control" placeholder="Password" name="password" type="password">
                        <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
                    </form>
                </div>
            </div>
        </div>
 </div>
 </div>
 </div>
<div class="col-sm-6">
<div class="login-container">
        <div id="output"></div>
            <div class="avatar"></div>
                <div class="form-box">
                    <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
                        <input class="form-control" placeholder="Username" name="username" type="text">
                        <input class="form-control" placeholder="Password" name="password" type="password">
                        <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
                    </form>
                </div>
            </div>
        </div>
 </div>
 </div>
</div>

4 个答案:

答案 0 :(得分：1)

您需要调整HTML结构。目前，在您到达第二个col-sm-6之前，您首先会在容器和行内关闭col-sm-6。两列都应位于container和row内。请参阅Grid System。

请参阅示例代码段。

＆＃13;
＆＃13; 
/**FOR DEMO ONLY**/

body {
  padding-top: 50px;
}
.login-container {
  background: #f2f2f2;
  padding: 20px 15px 5px;
}
/**FOR DEMO ONLY**/

@media (max-width: 767px) {
  .no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
  }
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>Stacks @ Under 768px</h3>
  <div class="row">
    <div class="col-sm-6">
      <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>

        <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
          <div class="form-group">
            <input class="form-control" placeholder="Username" name="username" type="text">
          </div>
          <div class="form-group">
            <input class="form-control" placeholder="Password" name="password" type="password">
          </div>
          <div class="form-group">
            <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
          </div>
        </form>

      </div>
    </div>

    <div class="col-sm-6">
      <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>

        <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
          <div class="form-group">
            <input class="form-control" placeholder="Username" name="username" type="text">
          </div>
          <div class="form-group">
            <input class="form-control" placeholder="Password" name="password" type="password">
          </div>
          <div class="form-group">
            <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Never Stacks</h3>
  <div class="row no-gutter">
    <div class="col-xs-6">
      <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>

        <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
          <div class="form-group">
            <input class="form-control" placeholder="Username" name="username" type="text">
          </div>
          <div class="form-group">
            <input class="form-control" placeholder="Password" name="password" type="password">
          </div>
          <div class="form-group">
            <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
          </div>
        </form>

      </div>
    </div>

    <div class="col-xs-6">
      <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>

        <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
          <div class="form-group">
            <input class="form-control" placeholder="Username" name="username" type="text">
          </div>
          <div class="form-group">
            <input class="form-control" placeholder="Password" name="password" type="password">
          </div>
          <div class="form-group">
            <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用此

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>
        <div class="form-box">
          <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
            <input class="form-control" placeholder="Username" name="username" type="text">
            <input class="form-control" placeholder="Password" name="password" type="password">
            <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>
        <div class="form-box">
          <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
            <input class="form-control" placeholder="Username" name="username" type="text">
            <input class="form-control" placeholder="Password" name="password" type="password">
            <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

这应该有效

<div class="container">
  <div class="row">
    <div class="col-sm-6">
        <div class="login-container">
            <div id="output"></div>
            <div class="avatar"></div>
            <div class="form-box">
                <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
                    <input class="form-control" placeholder="Username" name="username" type="text">
                    <input class="form-control" placeholder="Password" name="password" type="password">
                    <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="login-container">
            <div id="output"></div>
            <div class="avatar"></div>
            <div class="form-box">
                <form accept-charset="UTF-8" role="form" class="form-signin" action="login2.php" method="post">
                    <input class="form-control" placeholder="Username" name="username" type="text">
                    <input class="form-control" placeholder="Password" name="password" type="password">
                    <button class="btn btn-info btn-block login" type="submit" name="login" id="login">Login</button>
                </form>
            </div>
        </div>
    </div>
</div>

答案 3 :(得分：0)

您过早关闭.row div。从中间取出</div>之一并将其放在最后。

我还会将您的列div更新为<div class="col-xs-12 col-sm-6">，以便为小屏幕保持一致的填充。

相关问题
最新问题