引导形式不在div的中心

Question

我有一个bootstraap表单，其中两个字段我添加了.d-inline-block类，使其彼此相邻，而另一个字段我没有添加该类，因此它位于这两个字段之下。

我希望它位于div的中心，但我无法做到。 仅前两个字段会居中，而最后一个div不在中心。

有人可以指出错误吗？

 @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' ); .d-inline-block { width: 40%; } .message { width: 80%; } .formClass { margin-left: auto !important; margin-right: auto !important; text-align: center; } 

 <form class="formClass "> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="nameInput"> <div class="form-control-placeholder"> Name </div> </div> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> <div class="form-group message"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> </form> 

https://jsfiddle.net/97avbgsq/

Answer 1

在第三个DIV中添加一个类，并display: inline-block; ：

 @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' ); .d-inline-block { width: 40%; } .message { width: 80%; } .formClass { margin-left: auto !important; margin-right: auto !important; text-align: center; } .x { display: inline-block; } 

 <form class="formClass "> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="nameInput"> <div class="form-control-placeholder"> Name </div> </div> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> <div class="form-group message x"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> </form> 

https://jsfiddle.net/tyuxpzk9/1/

Answer 2

尽管您可以自由创建自己的自定义CSS类来控制表单字段的大小和位置，但我还是建议您使用内置的网格系统列类来控制输入字段的大小和位置。

Bootstrap 4网格系统

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); 

 <form> <div class="row"> <div class="form-group col-sm-4 offset-sm-2"> <input type="text" class="form-control" id="nameInput"> <label class="d-block text-center" for="nameInput">Name</label> </div> <div class="form-group col-sm-4"> <input type="text" class="form-control" id="phoneInput"> <label class="d-block text-center" for="phoneInput">Phone</label> </div> </div> <div class="row"> <div class="form-group col-sm-8 offset-sm-2"> <input type="text" class="form-control" id="phoneInput"> <label class="d-block text-center" for="phoneInput">Phone</label> </div> </div> </form> 

Answer 3

使用引导程序4，可以在父.d-flex .flex-wrap .justify-content-center上使用辅助类.d-flex .flex-wrap .justify-content-center 。

 .d-inline-block { width: 40%; } .message { width: 80%; } .formClass { margin-left: auto !important; margin-right: auto !important; text-align: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <form class="formClass d-flex flex-wrap justify-content-center"> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="nameInput"> <div class="form-control-placeholder"> Name </div> </div> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> <div class="form-group message"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> </form> 

但是，如果要使用原始代码，请将width为width的块元素水平居中，请使用margin-left: auto; margin-right: auto margin-left: auto; margin-right: auto或margin: auto如果适合您，则简称为margin: auto 。 您也可以使用.mx-auto bootstrap helper类来执行此操作。

 .d-inline-block { width: 40%; } .message { width: 80%; } .formClass { margin-left: auto !important; margin-right: auto !important; text-align: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <form class="formClass "> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="nameInput"> <div class="form-control-placeholder"> Name </div> </div> <div class="form-group d-inline-block"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> <div class="form-group message mx-auto"> <input type="text" class="form-control" id="phoneInput"> <div class="form-control-placeholder"> Phone </div> </div> </form>