javascript - Bootstrap 中每行有多个文本区域

标签 javascript html css twitter-bootstrap textarea

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

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

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

有没有办法让文本区域相互“插入”并同时具有响应式设计?

最佳答案

最好使用 resize 属性,例如

textarea { resize: vertical; }

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

关于javascript - Bootstrap 中每行有多个文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32761052/

相关文章:

php - 无法根据js变量的值获取php变量的值

javascript - 从对象中提取键时,对象有一个额外的属性

javascript - 如何通过单击label标签将光标移动到输入文本框中?

html - 滚动 Div 后的过渡持续时间延迟

css - Ie11 不应用媒体查询样式

javascript - Div 高度始终为零 - 如何使其自动假定高度

css - ExtJS 4.2 标题文本换行时如何设置网格过滤器高度?

javascript - 如何使用 React Router v4 将 Redux props 传递到不同路由中的单独组件?

javascript - 如何在替换为新元素之前删除 HTML 标签?

html - 使用不透明度属性时防止文本变得不透明