我想创建不同的登录表单。如何将我的登录容器放在彼此之外?我尝试调整列网格,但它不起作用。我尝试添加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>
答案 0 :(得分:1)
您需要调整HTML结构。目前,在您到达第二个col-sm-6
之前,您首先会在容器和行内关闭col-sm-6
。两列都应位于container
和row
内。请参阅Grid System。
请参阅示例代码段。
/**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;
答案 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">
,以便为小屏幕保持一致的填充。