如何在Jumbotron - Bootstrap 4中居中表格

时间:2017-02-07 19:18:40

标签: html css twitter-bootstrap

我对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;
&#13;
&#13;

2 个答案:

答案 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>