Html 在 Bootstrap 4 中将表单居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44389464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align the form to the center in Bootstrap 4
提问by eyedfox
I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps.
我正在尝试将表单与中心对齐并保持响应。我尝试了几种方法，但都没有成功。我试图将所有文本和表单居中。我正在使用 Bootstrap v4。我不确定这是否有帮助。
HTML:
HTML：
<section id="cover">
<div id="cover-caption">
<div id="container">
<div class="col-sm-10 col-sm offset-1">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
<a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
</div>
</div>
</div>
</section>
CSS:
CSS：
html,
body{
height: 100%;
}
#cover {
background: #222 url('../img/stars.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
}
#cover-caption {
width: 100%;
}
}
回答by Zim
You need to use the various Bootstrap 4 centering methods...
您需要使用各种 Bootstrap 4 居中方法...
- Use
text-centerfor inline elements. - Use
justify-content-centerfor flexbox elements (ie;form-inline)
- 使用
text-center内联元素。 - 使用
justify-content-center用于Flexbox的元件（即，form-inline）
https://www.codeply.com/go/Am5LvvjTxC
https://www.codeply.com/go/Am5LvvjTxC
Also, to offset the column, the col-sm-*must be contained within a .row, and the .rowmust be in a container...
此外，要偏移列，col-sm-*必须包含在 a 中.row，并且.row必须在容器中......
<section id="cover">
<div id="cover-caption">
<div id="container" class="container">
<div class="row">
<div class="col-sm-10 offset-sm-1 text-center">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
<a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
</div>
</div>
</div>
</div>
</section>
回答by SuRa
<div class="d-flex justify-content-center align-items-center container ">
<div class="row ">
<form action="">
<div class="form-group">
<label for="inputUserName" class="control-label">Enter UserName</label>
<input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
<small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Enter Password</label>
<input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
</div>
</form>
</div>
</div>
回答by Anjana Silva
All above answers perfectly gives the solution to center the form using Bootstrap 4. However, if someone wants to use out of the box Bootstrap 4css classes without help of any additional styles and also notwanting to use flex, we can do like this.
以上所有答案完美地给出了使用Bootstrap 4. 但是，如果有人想利用开箱Bootstrap 4无需任何额外的风格，也有利于CSS类不希望使用flex，我们可以这样做。
A sample form
样本表格
HTML
HTML
<div class="container-fluid h-100 bg-light text-dark">
<div class="row justify-content-center align-items-center">
<h1>Form</h1>
</div>
<hr/>
<div class="row justify-content-center align-items-center h-100">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<form action="">
<div class="form-group">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" />
</div>
<div class="form-group text-center">
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
</div>
<div class="form-group">
<div class="container">
<div class="row">
<div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div>
<div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Link to CodePen
代码笔链接
https://codepen.io/anjanasilva/pen/WgLaGZ
https://codepen.io/anjanasilva/pen/WgLaGZ
I hope this helps someone. Thank you.
我希望这可以帮助别人。谢谢你。
