html - 使用 Bootstrap 的多行输入表单字段

Question

<form class="span6">
  <h2>Get In Touch</h2><br>
  <input class="span6" type="text" placeholder="Your first name" required>
  <input class="span6" type="text" placeholder="Your last name" required>
  <input class="span6" type="email" placeholder="Your email" required>
  <input class="span6" type="text" placeholder="Your phone number">
  <input class="span6" type="text" rows="3" placeholder="What's up?" required><br>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="clear" class="btn">Clear</button>
</form><!--/.span6-->

这是我在 Bootstrap 中使用的表单。我试图让我的最后一个输入字段跨越 6 列和 3 行，但它只显示为 6 列和 1 行。关于如何使我的输入框更大的任何想法？谢谢。

Answer 1

我认为问题在于您使用的是 type="text" 而不是 textarea。你想要的是：

<textarea class="span6" rows="3" placeholder="What's up?" required></textarea>

澄清一下，type="text" 总是一行，而 textarea 可以是多行。

Answer 2

Nick Mitchinson 的答案是针对 Bootstrap 版本 2。

如果您使用的是 Bootstrap 版本 3，那么表单会发生一些变化。对于引导程序 3，请改用以下内容：

<div class="form-horizontal">
    <div class="form-group">
        <div class="col-md-6">
            <textarea class="form-control" rows="3" placeholder="What's up?" required></textarea>
        </div>
    </div>
</div>

其中，col-md-6 将针对中型设备。您可以添加 col-xs-6 等以针对较小的设备。