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文件中的display:inline上设置label，例如这样：

label {
    display:inline
}

以下是演示：http://www.bootply.com/132699

已编辑：真正的Bootstrap方式是在.form-inline元素中使用<form>代替：

<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

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

1 个答案: