引導4接觸形式與3列

Question

這是現在解決了，謝謝

我做了一個頁面的網站使用引導4.我想擁有的聯繫方式我的兒子有3列，並排側面，名稱，電子郵件和電話。它呈現在一列中。我從Bootstrap複製代碼，但似乎無法得到它的糾正。

這是我的代碼

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<form id="contact-form" method="post" action="contact.php" role="form"> 
 
<div class="messages"></div> 
 
<div class="controls"> 
 
<div class="row"> 
 
<div class="col-sm-4"> 
 
<div class="form-group">          
 
<label for="form_name">Name *</label>          
 
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required."> 
 
<div class="help-block with-errors"></div></div></div></div> 
 
    
 
<div class="col-sm-4"> 
 
<div class="form-group"> 
 
<label for="form_email">Email *</label> 
 
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> 
 
<div class="help-block with-errors"></div> 
 
</div></div> 
 
    
 
<div class="col-sm-4"> 
 
<div class="form-group"> 
 
<label for="form_phone">Phone</label> 
 
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number"> 
 
<div class="help-block with-errors"></div> 
 
</div></div></div> 
 
<div class="clearfix"></div> 
 

 
<div class="row"> 
 
<div class="col-md-12"> 
 
<div class="form-group"> 
 
<label for="form_message">Message *</label> 
 
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea> 
 
<div class="help-block with-errors"></div> 
 
</div></div> 
 
    
 
<div class="col-md-12"> 
 
<input type="submit" class="btn btn-warning btn-send" value="Send message"> 
 
</div></div> 
 

 
<div class="row"> 
 
<div class="col-md-12"> 
 
<p class="text-muted"><strong>*</strong> These fields are required.</p> 
 
</div></div> 
 
</form> \t

Answer 1

你過早關閉了row。

https://www.codeply.com/go/zcUPYrloog

<div class="controls"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <div class="form-group"> 
        <label for="form_name">Name *</label> 
        <input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required."> 
        <div class="help-block with-errors"></div> 
       </div> 
      </div> 
      <div class="col-sm-4"> 
       <div class="form-group"> 
        <label for="form_email">Email *</label> 
        <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> 
        <div class="help-block with-errors"></div> 
       </div> 
      </div> 
      <div class="col-sm-4"> 
       <div class="form-group"> 
        <label for="form_phone">Phone</label> 
        <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number"> 
        <div class="help-block with-errors"></div> 
       </div> 
      </div> 
     </div> 
    </div> 

https://www.codeply.com/go/zcUPYrloog