多个文本域在自举

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

我的代码（两个文本域）目前看起来如下：

<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的，左边的文字区域落在后面，右边一个，像：

我相信这是因为白手起家网格系统。

有什么办法有文本域“推”彼此在同一时间，响应式设计？

来源

2015-09-24 Dennis

如果你愿意，我们可以限制容器本身中的特定文本区域，这样我不会去正确的textarea – Thinker

最好使用调整财产一样

textarea { resize: vertical; }

它只是移动的textarea 下来。见JSFiddle

来源

2015-09-24 12:33:39 SHAZ

好一个！我选择了这个，因为它工作正常;） – Dennis

@丹尼斯，它为我感到高兴......一切顺利 – SHAZ

您必须禁用从texrare使用CSS的调整大小选项。如果添加的CSS float:right您form-control，应立即停止重叠类

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

}

来源

2015-09-24 12:26:48

MH后面，我会考虑一下。但是如果我想保持调整textarea的能力呢？也许我应该把文本域都在一列中有两列（COL-MD-8） – Dennis

的大小如果你想保持它变现然后采用下列风格。的textarea {最大宽度：100％;} –

- ：只要申请调整大小没有风格如下。

来源

2015-09-24 12:28:22 Ash

多个文本域在自举

回答

相关问题