表单字段彼此堆叠，而不是在Twitter引导程序中彼此堆叠

Question

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

<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>

但是，由于某种原因，模板元素会一个一个地堆叠在另一个之上。 我该如何解决？

Answer 1

在Bootstrap 2上（并通过代码判断，这就是您所使用的），一个快速的解决方法是在您的自定义CSS文件的label上设置display:inline ，如下所示：

label {
    display:inline
}

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

编辑：真正的Bootstrap方法是在<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