Bootstrap text_area高度设置不生效问题求助

我来帮你搞定这个问题～从你的描述和代码来看，核心问题出在CSS选择器的目标元素不对，咱们一步步来分析：

问题根源 #

你把height: 15rem !important加在了父容器.text_form（也就是包裹text area的<div class="form-group text_form">）上，但实际需要调整高度的是里面的<textarea class="form-control">元素。这就导致父容器被拉长了，但text area本身还是默认高度，看起来就像是设置了margin一样。

而你在控制台手动添加样式时，应该是直接选中了.form-control的text area，所以生效了——这也验证了咱们的判断。

解决方案 #

这里有几个简单有效的办法：

1. 修正CSS选择器，直接选中Text Area #

修改你的messages.scss，把样式目标指向text area本身：

#message_form{ 
  margin-left: 4.0rem; 
  margin-right: 4.0rem; 
  margin-top: 2.0rem; 
  margin-bottom: 2.0rem; 
  width: 50%; 
} 

// 直接选中text_form容器内的form-control元素
.text_form .form-control { 
  height: 15rem !important; 
}

2. 直接在erb代码中给Text Area加行内样式 #

如果不想调整CSS文件，也可以直接在_form.html.erb里给text area添加style属性，行内样式的优先级最高：

<%# Message Context %>
<div class="form-group text_form">
  <%= form.label :text %>
  <%= form.text_area :text, id: :message_text, :class=>"form-control", style: "height: 15rem;" %>
</div>

3. 确保SCSS加载顺序正确（可选） #

如果上面的方法还是有问题，检查一下你的Rails资产加载顺序，确保messages.scss是在Bootstrap的CSS之后加载的——这样你的自定义样式才能覆盖Bootstrap的默认样式。一般在application.scss里，Bootstrap的导入应该在你的自定义SCSS之前：

@import "bootstrap";
@import "messages";

验证效果 #

修改后重启Rails服务器（或者用热重载工具），刷新页面就能看到text area的高度正常生效了～

内容的提问来源于stack exchange，提问作者frillybob