对Bootstrap来说仍然相对较新，所以如果这是一个愚蠢的问题，请原谅我。
如何使用 Bootstrap 将按钮偏移到居中窗体的左侧或右侧？我尝试使用"证明内容：弹性结束"; 但这只会把它放在页面的边缘。我尝试使位置相对并以这种方式设置样式，但它没有响应。
有什么建议吗？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>PHP</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="php.css">
</head>
<body>
<form>
<div class="form-group centered">
<div class="col-md-6">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="form-group centered">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</div>
</form>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
这是 CSS：
.centered {
display: flex;
align-items: center;
justify-content: center;
}
body {
padding: 10px;
}
您已经使用了引导 3 个链接。您应该使用bootstrap-4.1链接。
- 使用
col-md-6表示form。 - 对
form使用mx-auto将其对齐到中心。 - 使用
text-right而不是text-center将按钮右对齐。默认情况下，它位于左侧
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<form class="col-md-6 mx-auto">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>https://codepen.io/anon/pen/dKeJeQ
为什么不删除中心类并使用边距使表单居中 看到这个小提琴
<form>
<div class="form-group ">
<div class="col-md-6">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="form-group centered">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</div>
</form>
.css
form{
position:relative;
width:80%;
margin:0 auto;
}