Question

现在已经解决了，谢谢

我使用Bootstrap 4为我的儿子制作了一个单页网站。我试图让联系表格有3列，并排，用于姓名，电子邮件和电话。它呈现在一列中。我从Bootstrap复制代码，但似乎无法得到它的正确性。

这是我的代码

＆＃13;

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

＆＃13;

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

Bootstrap 4联系表格，3列

1 个答案: