首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用Bootstrap的多行输入表单域

使用Bootstrap的多行输入表单域
EN

Stack Overflow用户
提问于 2013-01-19 01:17:53
回答 2查看 138.8K关注 0票数 45
代码语言:javascript
运行
复制
<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行。有什么办法可以让我的输入框变大吗?谢谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-01-19 01:36:03

我认为问题在于你使用的是type=“文本”而不是文本区域。你想要的是:

代码语言:javascript
运行
复制
<textarea class="span6" rows="3" placeholder="What's up?" required></textarea>

为了清楚起见,type=“文本”总是一行,而文本区域可以是多行。

票数 64
EN

Stack Overflow用户

发布于 2014-08-24 03:18:48

Nick Mitchinson的答案是Bootstrap版本2。

如果您使用的是Bootstrap版本3,那么表单会有一些变化。对于bootstrap 3,请使用以下代码:

代码语言:javascript
运行
复制
<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等来瞄准较小的设备。

票数 45
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14404157

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档