如何使用bootstrap创建消息框？

Question

我正在使用Bootstrap 3.我只是无法创建内部应该有4行的消息框。谁能帮帮我吗？我的代码如下：

<div class="row">
    <div class="col-lg-12">
        <form action="" method="POST" enctype="multipart/form-data" id="form_id">
            <div class="form-group">
                 <h5><label for="inputName">Name</label></h5>

                <input type="text" name="career[name]" class="form-control" tabindex="1" placeholder="Enter your name" pattern="[a-zA-Z. ]{1,50}" required>
            </div>
            <div class="form-group">
                 <h5><label for="inputEmail">Email</label></h5>

                <input type="email" name="career[email]" class="form-control" tabindex="2" placeholder="Enter your email address" required>
            </div>
            <div class="form-group">
                 <h5><label for="inputMobile">Mobile</label></h5>

                <input type="tel" name="career[mobile]" class="form-control" tabindex="3" placeholder="Enter your mobile number" pattern="[0-9]{10}" maxlength="10" required>
            </div>
            <div class="form-group">
                 <h5><label for="inputMessage">Message</label></h5>

                <input type="text" name="career[message]" class="form-control" tabindex="4" placeholder="Write your details" required>
            </div>
            <button type="submit" name="submit" class="btn btn-primary btn-block" tabindex="5">Submit</button>
        </form>
    </div>
</div>

我希望我的消息框像这样。

Answer 1

您的问题是您没有使用textarea！替换以下代码：

<input type="text" name="career[message]" class="form-control" tabindex="4" 
       placeholder="Write your details" required>

使用：

<textarea name="career[message]" class="form-control" tabindex="4"
          placeholder="Write your details" required></textarea>