twitter-bootstrap 如何使用引导程序 4 居中表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46560362/
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
how to center form using bootstrap 4
提问by bakaio
I just learned bootstrap and try to centered a form using bootstrap 4 but seems keep failing. I've try put container, margin auto, grid, etc but still failing.
我刚刚学习了引导程序并尝试使用引导程序 4 将表单居中，但似乎一直失败。我试过放置容器、自动保证金、网格等，但仍然失败。
Here is the last code using bootstrap grid.
这是使用引导网格的最后一个代码。
<form class="col-lg-6 offset-lg-3">
<div class="row">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>
and here is the link https://jsfiddle.net/artjia/emsw7t93/
回答by Farhad Bagherlo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="col-lg-6 offset-lg-3 ">
<div class="row justify-content-center">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>回答by rdhainaut
Use the css class justify-content-center.
offset-col-* css class doesn t exist anymore in V4 bootstrap. Now it uses flex grid.
使用 css 类justify-content-center。V4 引导程序中不再存在 offset-col-* css 类。现在它使用弹性网格。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<form>
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</form>
</div>
</div>
</div>For more info, consult the documentation => https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
有关更多信息，请参阅文档 => https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
Et voilà.
等等。
回答by Quentin
- Columns go inside rows, not the other way around
- The offset properties are from Bootstrap 3 not Bootstrap 4. You should use margin offsets instead
- 列进入行内，而不是相反
- 偏移量属性来自 Bootstrap 3 而不是 Bootstrap 4。您应该使用边距偏移量
Such:
这样的：
<form class="row">
<div class="col-lg-6 ml-auto">
