当我将Bootstrap样式应用于它时，Textarea的高度会缩小

Question

我有一个textarea，其CSS属性设置为100％。它看起来像这样：

当我应用bootstrap样式（向其添加'form-control'类）时，我看起来像这样：

检查元素后。我发现bootstrap将其高度值覆盖为“auto”。 CSS看起来像这样：

textarea.form-control{
    height: auto;
}

但即使我将上面代码中的高度更改为

textarea.form-control {
    height:100%
}

它仍然看起来像这样：

请注意，与原始高度相比，高度仍略微缩小。

如何将其高度设置为原始高度（如第一张图片中所示）并仍然应用Bootstrap样式？

Answer 1

试试这个，希望这对你有用。

textarea.form-control {
    height:100% !important;
}

Answer 2

要制作textarea 100%的高度， 更好地使用下面的css样式：

textarea.form-control {
    height: 100% !important;
}

此样式将覆盖.form-control类引导程序的样式。

希望这有帮助！

Answer 3

您可以在其父级上设置固定高度。

<div class="form-group" style="height:100px;">
  <textarea class="form-control"></textarea>
  <button class="btn">Create tweet</button>
</div>