如何在Jumbotron中集中表单 - Bootstrap 4 [英] How do I center a form within Jumbotron - Bootstrap 4
本文介绍了如何在Jumbotron中集中表单 - Bootstrap 4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在jumbotron中对齐一个表单：
Everything在除了表格之外的jumbotron中心。我一直在这个小时，只是不知道。
这是我的代码：
<！DOCTYPE html>< ; html lang =en>< head> < meta charset =utf-8> < meta content =width = device-width，initial-scale = 1，shrink-to-fit = noname =viewport> < link href =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css =stylesheet> < style type =text / css> .jumbotron {text-align：center; }< / style> <标题>< /标题>< /头><身体GT; < div class =jumbotron> < h1 class =display-3> Hello，world！< / h1> < p class =lead>这是一个简单的英雄单位，一个简单的jumbotron风格的组件，用于唤起对特色内容或信息的额外注意。< / p> < hr class =my-4> < p>它使用实用程序类别来排版和间隔，以便在较大的容器中将内容空间化。< / p> < form class =form-inline> < label class =sr-onlyfor =inlineFormInput>名称< / label> < input class =form-control mb-2 mr-sm-2 mb-sm-0id =inlineFormInputplaceholder =Jane Doetype =text> < label class =sr-onlyfor =inlineFormInputGroup>用户名< / label> < div class =input-group mb-2 mr-sm-2 mb-sm-0> < div class =input-group-addon> @< / div>< input class =form-controlid =inlineFormInputGroupplaceholder =Usernametype =text> < / DIV> < div class =form-check mb-2 mr-sm-2 mb-sm-0> < label class =form-check-label>< input class =form-check-inputtype =checkbox>记住我< / label> < / div>< button class =btn btn-primarytype =submit>提交< / button> < /形式> < / div>< / body>< / html>
h2_lin>解决方案
所有它真正需要的是设置宽度和自动保证金。
width：700px;
margin：0 auto;
但是，如果您愿意，也可以使用引导行和列。
< div class =row>
< div class =col-md-12>
< form ...
< / div>
< / div>
I'm completely new to Bootstrap so sorry if this is a silly question.
I am trying to center a form within a jumbotron: Everything in the jumbotron centers except the form. I've been a this for hours and just cant figure it out. Here's my code:
<!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>
解决方案
All it really needs is a set width and an auto margin.
width: 700px;
margin: 0 auto;
However, you can also use bootstrap rows and columns if you wish.
<div class="row">
<div class="col-md-12">
<form...
</div>
</div>
这篇关于如何在Jumbotron中集中表单 - Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
