Bootstrap 每行多个文本区域

Question

我有一个小网站，用户可以在其中输入一些文本，然后以不同的方式处理这些文本，例如所有字符都转换为 uppercase/lowercase 和其他有用的噱头。结果显示在多个文本区域块中。我希望该网站可以在移动设备上使用，所以我使用 Bootstrap。通常每个文本区域都有自己的行，但我想通过将两个或三个并排放置来对其中一些进行分组。

我的代码（用于两个文本区域）目前如下所示：

<body>
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-4 col-md-offset-2">
                <textarea
                    id="textarea1"
                    class="form-control"
                ></textarea>
            </div>

            <div class="col-md-4">
                <textarea
                    id="textarea2"
                    class="form-control"
                ></textarea>
            </div>
        </div>
    </div>
</body>

JSFiddle

这有点像预期的那样工作，但是一旦用户尝试调整文本区域的大小，左边的文本区域就会落后于右边的文本区域，比如 :

我相信这是因为 Bootstrap 的网格系统。

有没有办法让文本区域 'push' 彼此同时具有响应式设计？

Answer 1

您必须使用 CSS 禁用 texrare 的调整大小选项。只需按如下方式应用调整大小 none 样式：-

textarea {
    resize: none;
    max-width:100%;

}

Answer 2

如果您将 css float:right 添加到您的 class form-control 它应该停止重叠。

Answer 3

更好地使用 resize 属性就像

textarea { resize: vertical; }

它只移动文本区域向下。参见 JSFiddle

Bootstrap 每行多个文本区域

Multiple textareas per row in Bootstrap

html

javascript

css

textarea

twitter-bootstrap