如何使用引导程序4将表格中心4

Question

我刚学会引导程序并尝试使用引导程序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/

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

Answer 2

使用的CSS类justify-content-center。在V4 bootstrap中不再存在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>

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

的Et瞧。

Answer 3

1. 列里面去的行，而不是周围的其他方法
2. 偏移属性是从自举3不自引导4. You should use margin offsets instead

这样：

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