Html 使用 Bootstrap 的多行输入表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14404157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiline input form field using Bootstrap
提问by Brian
<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-->
Here's my form I'm using in Bootstrap. I'm trying to make my last input field span 6 columns across and 3 rows down, but it's only showing as 6 columns across and 1 row down. Any ideas on how to make my input box larger? Thanks.
这是我在 Bootstrap 中使用的表单。我试图让我的最后一个输入字段跨越 6 列和向下 3 行，但它只显示为跨越 6 列和向下 1 行。关于如何使我的输入框更大的任何想法？谢谢。
回答by Nick Mitchinson
I think the problem is that you are using type="text" instead of textarea. What you want is:
我认为问题在于您使用的是 type="text" 而不是 textarea。你想要的是：
<textarea class="span6" rows="3" placeholder="What's up?" required></textarea>
To clarify, a type="text" will always be one row, where-as a textarea can be multiple.
澄清一下， type="text" 将始终是一行，而 textarea 可以是多个。
回答by trees_are_great
The answer by Nick Mitchinson is for Bootstrap version 2.
Nick Mitchinson 的答案适用于 Bootstrap 版本 2。
If you are using Bootstrap version 3, then forms have changed a bit. For bootstrap 3, use the following instead:
如果您使用的是 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>
Where, col-md-6 will target medium sized devices. You can add col-xs-6 etc to target smaller devices.
其中，col-md-6 将针对中型设备。您可以添加 col-xs-6 等以定位较小的设备。
