引導多列形式

Question

我想創建一個2列聯繫表格使用引導，但我有這種困難，其中一些<div class="form-group">沒有按計劃去。

我的期望輸出應該是：

first name       message 
textbox       textbox 

last name       submit button 
textbox 

email 
textbox 

contactno 
textbox 

這裏是我的代碼。我現在的輸出是它們都在左側，消息的文本框很小。

<div class="col-sm-5 col-sm-offset-1"> 
<div class="form-group"> 
    <label for="fname">Name *</label> 
    <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name" required> 
</div> 
<div class="form-group"> 
    <label for="lname">Last Name</label> 
    <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter Last Name" required>     
    </div> 
<div class="form-group"> 
    <label for="email">Email</label>      
    <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" required> 
    </div> 
    <div class="form-group"> 
    <label for="contactno">Contact No.</label> 
    <input type="contactno" class="form-control" id="contactno" name="contactno" placeholder="Enter Contact No." required>    
    </div> 

    <div class="col-sm-5"> 
    <div class="form-group"> 
    <label for="message">Message</label> 
    <textarea name="message" id="message" class="form-control" rows="5" required></textarea>    
    </div> 
    <div class="form-group">     
    <button type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right" required="required">Submit Message</button> 
    </div> 
    </div> 
    </div> 

Answer 1

您目前已將第二列嵌套在第一列中，將它們分開，並且您應該看到所需的結果。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-sm-6"> 
 

 
     <div class="form-group"> 
 
     <label for="fname">Name *</label> 
 
     <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name" required> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="lname">Last Name</label> 
 
     <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter Last Name" required> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="email">Email</label> 
 
     <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" required> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="contactno">Contact No.</label> 
 
     <input type="contactno" class="form-control" id="contactno" name="contactno" placeholder="Enter Contact No." required> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="col-sm-6"> 
 

 
     <div class="form-group"> 
 
     <label for="message">Message</label> 
 
     <textarea name="message" id="message" class="form-control" rows="5" required></textarea> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right" required="required">Submit Message</button> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</div>