Question

我有一个小网站，用户可以在其中输入一些文本，然后以不同的方式处理此文本，例如所有字符都转换为大写/小写和其他有用的噱头。结果显示在多个textarea-blocks中。我希望网站可以在移动设备上使用，所以我使用Bootstrap。通常情况下，每个textarea都有它自己的行，但我想把它们中的一些放在一起，将两个或三个放在一起。

我的代码（两个textareas）目前如下所示：

<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

这种方式可以正常工作并且看起来如预期，但是一旦用户尝试调整textarea的大小，左侧textarea就会落后于右侧，例如：

我认为这是因为Bootstraps网格系统。

有没有办法让textareas＆＃39;推动＆＃39;彼此并且同时具有响应式设计？

Answer 1

您必须使用CSS禁用texrare的resize选项。只需应用resize none样式，如下所示： -

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

}

Answer 2

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

Answer 3

最好使用调整大小属性，例如

textarea { resize: vertical; }

它只会将textarea 向下移动。请参阅 JSFiddle

Bootstrap中每行多个textareas

3 个答案: