Bootstrap：当我对其应用 Bootstrap 样式时，文本区域的高度缩小了

Question

我在 CSS 中有一个高度属性设置为 100% 的文本区域。它看起来像这样：

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

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

textarea.form-control{
    height: auto;
}

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

textarea.form-control {
    height:100%
}

它看起来仍然是这样的：

请注意，与原始高度相比，高度仍然缩小了一点。

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

Answer 1

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

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

Answer 2

要使 textarea 100% 的高度，最好使用以下 css 样式：

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

此样式将覆盖 bootstrap 的 .form-control class 的样式。

希望对您有所帮助！

Answer 3

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

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

Bootstrap: Textarea height shrinked when I apply Bootstrap style to it