如何使用引导程序 4 使表单居中答案

【问题标题】：how to center form using bootstrap 4如何使用引导程序 4 使表单居中
【发布时间】：2017-10-05 00:55:02
【问题描述】：

我刚刚学习了引导程序并尝试使用引导程序 4 使表单居中，但似乎一直失败。我尝试过放置容器、自动边距、网格等，但仍然失败。

这是使用引导网格的最后一个代码。

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

这里是链接https://jsfiddle.net/artjia/emsw7t93/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用justify-content-center

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

【讨论】：

这里是 v4.3 文档的链接：Horizontal Alignment
代码 sn-p 并不完全正确，因为在 bootstrap V4 中不再存在 offset-lg-3。更多的容器应该包装一个“行”，并且一行应该有直接的“col”子级。查看我的答案stackoverflow.com/a/46560435/1152632 以获得正确的引导代码（我也是第一个答案:)）

【解决方案2】：

使用 css 类 justify-content-center。 offset-col-* css 类在 V4 引导程序中不再存在。现在它使用弹性网格。

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

有关更多信息，请参阅文档 => https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

等等。

【讨论】：

【解决方案3】：

列在行内，而不是相反
偏移属性来自 Bootstrap 3 而不是 Bootstrap 4。You should use margin offsets instead

这样的：

<form class="row">
    <div class="col-lg-6 ml-auto">

【讨论】：