我对Bootstrap是全新的,如果这是一个愚蠢的问题,那就很抱歉。
我试图将一个表格放在一个jumbotron中: 除了形式之外,jumbotron中的所有东西都在中心。我已经好几个小时了,只是想不通。 这是我的代码:
<!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>
&#13;
答案 0 :(得分:1)
Bootstrap有一个类.center-block,可以与嵌套的col-*-*
大小一起使用,以使表单居中。响应式col-*-*
将根据屏幕尺寸帮助调整表单。
集合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。
答案 1 :(得分:0)
它真正需要的是设置宽度和自动margin
。
width: 700px;
margin: 0 auto;
但是,如果您愿意,也可以使用bootstrap行和列。
<div class="row">
<div class="col-md-12">
<form...
</div>
</div>