Bootstrap表單 - 爲什麼我的提交按鈕擁擠我的輸入？

Question

https://jsfiddle.net/w0bekp8q/

<form class="form" role="form" method="post" action=""> 
       <div class="form-group"> 
        <div class="col-md-4"> 
         <label for="reportee_first_name" class="control-label">First Name</label> 
         <input type="text" class="form-control" id="reportee_first_name" name="reportee_first_name" placeholder="First Name" value=""> 
        </div> 
        <div class="col-md-4"> 
         <label for="reportee_middle_name" class="control-label">Middle Name</label> 
         <input type="text" class="form-control" id="reportee_middle_name" name="reportee_middle_name" placeholder="Middle Name" value=""> 
        </div> 
        <div class="col-md-4"> 
         <label for="reportee_last_name" class="control-label">Last Name</label> 
         <input type="text" class="form-control" id="reportee_last_name" name="reportee_last_name" placeholder="Last Name" value=""> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-6"> 
         <label for="reportee_address_1" class="control-label">Address</label> 
         <input type="text" class="form-control" id="reportee_address_1" name="reportee_address_1" placeholder="Address" value=""> 
        </div> 
        <div class="col-md-6"> 
         <label for="reportee_address_2" class="control-label">Address 2</label> 
         <input type="text" class="form-control" id="reportee_address_2" name="reportee_address_2" placeholder="Address 2" value=""> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-6"> 
         <label for="reportee_city" class="control-label">City</label> 
         <input type="text" class="form-control" id="reportee_city" name="reportee_city" placeholder="City" value=""> 
        </div> 
        <div class="col-md-6"> 
         <label for="reportee_zip" class="control-label">Zip</label> 
         <input type="text" class="form-control" id="reportee_zip" name="reportee_zip" placeholder="Zip" value=""> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-12"> 
         <label for="reportee_phone" class="control-label">Phone</label> 
         <input type="text" class="form-control" id="reportee_phone" name="reportee_phone" placeholder="Phone" value=""> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-12"> 
         <label for="reportee_email" class="control-label">Email Address</label> 
         <input type="email" class="form-control" id="reportee_email" name="reportee_email" placeholder="Email Address" value=""> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-12"> 
         <button id="submit" name="submit" type="submit" class="btn btn-primary btn-sm">Send</button> 
        </div> 
       </div> 
</form> 

在我上面的jsfiddle，如果拖動它，你可以看到我的提交按鈕屁股靠在電子郵件地址輸入框。

這是怎麼看我的開發站點 -

缺少什麼我在這裏使我的提交按鈕，沒有它和輸入之間的空間？

Answer 1

只是改變了形式類，形成水平：

<form class="form" role="form" method="post" action=""> 

到

<form class="form-horizontal" role="form" method="post" action=""> 

編輯： 當您使用窗體類的所有COL-MD-*類你內心的形式使用-group將得到一個float：left;在大屏幕上導致形式組不會把它的孩子的身高。所以它會進入根元素的頂部，所以form-group的margin-bottom將不會在您的按鈕的上方應用，而是應用在根元素的頂部。使用form-horizo​​ntal可以防止這種行爲。

Answer 2

我不知道爲什麼，但你的.form-group正在失去它從引導md視圖端口寬度和大的高度。有幾件事你可以做。您可以將margin-bottom應用於內部div，使用col-md-12而不是.form-group。

.col-md-12 { 
    margin-bottom: 15px; 
} 

您還可以嘗試使用col-xs-12而不是md。然後你有一致的風格，並可以添加所需的利潤沒有任何@media。

<div class="form-group"> 
    <div class="col-xs-12"> 
    ..... 
    </div> 
</div> 

編輯：亞當指出冗餘引導類。