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

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

这似乎是一个浏览器bug on chrome - FF很好，IE doesn't implement css:resize）。

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

任何可调整大小的textarea display:block位于center元素内，就会发生这种情况。

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

解决方案

修复1 ：引导程序会将display的{​​{1}}设置为.form-control。您需要将其停留在block，文本区域的inline-block显示。

initial

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

修复2 （首选）：<center>元素实际上已弃用，因此 应使用css属性<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>。请注意，现在您需要将显示声明为内联块，以便在父div中正确居中。

text-align:center

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