我对 Bootstrap 完全陌生，如果这是一个愚蠢的问题，我很抱歉。
我正在尝试将表格置于大屏幕的中心：
除了形式之外，大屏幕中的所有内容都处于中心位置。我已经这样好几个小时了，就是想不通。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.jumbotron{
text-align: center;
}
</style>
<title></title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label> <input class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe" type="text"> <label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">
@
</div><input class="form-control" id="inlineFormInputGroup" placeholder="Username" type="text">
</div>
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label"><input class="form-check-input" type="checkbox"> Remember me</label>
</div><button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap有一个类.center-block可以与嵌套一起使用col-*-*调整大小以使表格居中。反应灵敏的col-*-*将帮助表单根据屏幕尺寸进行调整。
A set width可能会导致表格在较小的屏幕尺寸下从容器中流出。
您还需要删除float:left;从内心col-*-*您可以通过类设置：
CSS:
.pull-none {
float: none;
}
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12 foo">
<div class="jumbotron">
<div class="row">
<div class="col-sm-6 col-lg-4 center-block pull-none bar">
<form></form>
</div>
</div>
</div>
</div>
</div>
</div>
您还可以使用col-*-offset-*也将元素居中，这是将表单设置为的示例col-sm-6并抵消4到中心：
<div class="row">
<div class="col-sm-12 foo">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 center-block pull-none bar">
<form></form>
</div>
</div>
</div>
</div>
这里有一个jsfiddle演示功能。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
