表单字段彼此堆叠，而不是在 twitter bootstrap 中彼此相邻

【问题标题】：form fields are stacked on top of each other instead of next to each other in twitter bootstrap表单字段彼此堆叠，而不是在 twitter bootstrap 中彼此相邻
【发布时间】：2014-04-25 05:24:57
【问题描述】：

我正在使用 twitter 引导程序并尝试创建一行，其中两个文本框彼此相邻。这是我的代码：

<div class="container">
    <div class="span12"> 
        <div class="row">
            <label for="question_content">Content: </label>
            <textarea class="span3" id="question_content" name="question[content]" style="resize: none;">
            </textarea>

            <label for="question_conversation">Conversation: </label>
            <textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;">
            </textarea>     
        </div>
    </div>
</div>

但是，由于某种原因，表单元素一个一个地堆叠在一起。我该如何解决这个问题？

【问题讨论】：

标签： css forms twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

在 Bootstrap 2 上（根据代码判断，这就是您正在使用的）一种快速修复方法是在您的自定义 CSS 文件中将 display:inline 设置为 label，如下所示：

label {
    display:inline
}

这是一个演示：http://www.bootply.com/132699

已编辑：然而，真正的引导方式是在您的 <form> 元素中使用 .form-inline：

<form class="form-inline">
    <div class="container">
        <div class="span12"> 
            <div class="row">
                <label for="question_content">Content: </label>
                <textarea class="span3" id="question_content" name="question[content]" style="resize: none;">
                </textarea>

                <label for="question_conversation">Conversation: </label>
                <textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;">
                </textarea>     
            </div>
        </div>
    </div>
</form>

查看文档：http://getbootstrap.com/css/#forms-inline

这是更新后的演示：http://www.bootply.com/132701

【讨论】：