Bootstrap中每行多个文本区域答案

【问题标题】：Multiple textareas per row in BootstrapBootstrap中每行多个文本区域
【发布时间】：2023-03-10 11:13:02
【问题描述】：

我有一个小网站，用户可以在其中输入一些文本，然后以不同的方式处理这些文本，例如将所有字符转换为大写/小写和其他有用的噱头。结果显示在多个文本区域块中。我希望网站可以在移动设备上使用，所以我使用 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

这有点像预期的那样工作并且看起来像预期的那样，但是一旦用户尝试调整 textarea 的大小，左侧的 textarea 就会落后于右侧的 textarea，例如：

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

有没有办法让文本区域相互“推动”并同时进行响应式设计？

【问题讨论】：

如果您愿意，我们可以限制该容器本身内的特定文本区域，这样我就不会落后于正确的文本区域

标签： javascript html css twitter-bootstrap textarea

【解决方案1】：

最好使用 resize 属性，例如

textarea { resize: vertical; }

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

【讨论】：

@Dennis，我很高兴...一切顺利

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

}

【讨论】：

嗯，我会考虑的。但是如果我想保留调整文本区域大小的能力呢？也许我应该将两个文本区域放在一列中，大小为两列（col-md-8）
如果你想保持它的可实现性，那么应用以下样式。 textarea{max-width:100%;}