引導窗體不在div的中心

Question

我有一個引導窗體，其中兩個域添加了類.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

使用自助4，您可以在父使用助手類.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，使用margin-left: auto; margin-right: auto或margin: auto短期是否適合你。您也可以使用.mx-auto引導輔助程序類來執行此操作。

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

Answer 2

一類添加到第三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 3

雖然您可以自由創建自己的自定義CSS類來控制表單字段大小和位置，但我想建議使用內置的網格系統列類來控制輸入字段的大小和位置。

Bootstrap 4 Grid System

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