CSS调整大小适用于水平但不垂直吗？

Question

我正在使用引导程序表单，试图使其在水平和垂直方向上都可调整大小。使用简单的CSS，我有：

.form-group-description{
    resize: both;
    overflow: auto;
    width: 50%;

}

这将使我水平调整大小，但不能垂直调整大小。我尝试只使用，resize: vertical;但是也没有用。

有任何想法吗？您可以在http://impissed.co/上看到我在说什么。 我将离开网站，直到得到一些帮助为止（这是说明框）

编辑：我将其更改为使用textarea而不是在html中输入。但是，现在当您调整大小到右侧并移回左侧时，表单将保持向右移动。这是html：

<div class="form-group-description form-group-lg">
    <textarea rows="4" cols="50" type="text" class="form-control" placeholder="Description"> </textarea>
</div>

Answer 1

最小，完整和可验证的示例

这似乎是Chrome 上的浏览器错误 -FF很好，并且IE不实现css：resize）。

通过左右拖动缩放器，可以使用以下代码简单地重现它。它将以固定的左侧位置调整到右侧的大小，但是在缩小时会尝试居中：

对于元素内部textarea带有的任何可调整大小display:block的center元素，都会发生这种情况。

<center>
  <textarea style="display:block"></textarea>
</center>

解决方案

修复1：引导设置display为任何.form-control给block。您需要将其放置inline-block在文本区域的initial显示屏上。

textarea.form-control {
  resize: both;
  display: inline-block;
  width: 50%;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<center>
  <textarea rows="4" cols="50" type="text" 
            class="form-control" placeholder="Description">
  </textarea>
</center>

修复2（首选）：实际上不推荐使用<center>元素，因此应text-align:center改为使用css属性。请注意，现在您需要将显示声明为内嵌块，以使其在父div中正确居中。

textarea.form-control {
  resize: both;
  display: inline-block;
  width: 50%;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="text-center">
  <textarea rows="4" cols="50" type="text" 
            class="form-control" placeholder="Description">
  </textarea>
</div>