使用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,那么表单已经发生了一些变化.对于bootstrap 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等来定位较小的设备.