引导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