引导 text_area 的高度未正确应用答案

【问题标题】：Height for bootstrap text_area not applying properly引导 text_area 的高度未正确应用
【发布时间】：2018-05-11 02:18:29
【问题描述】：

我有一个 WIP 表单，我想为其扩展一个文本区域。但是，当我应用高度时，它更像是边距而不是实际高度。如果我在呈现页面后编辑 CSS，它可以正常工作。

与height: 12.5

现在，当我检查控制台时，我注意到 height: 12.5rem 不存在。但是，如果我添加它，页面会正确呈现。

我正在使用 bootstrap 4 和 rails。相关代码如下。

messages.scss

#message_form{
  margin-left: 4.0rem;
  // Only visible with smaller screen sizes
  margin-right: 4.0rem;
  margin-top: 2.0rem;
  margin-bottom: 2.0rem;
  width: 50%;
}

.text_form{
  height: 15rem !important;
}

_form.html.erb

<div id="message_form">
  <%= form_with(model: message, local: true) do |form| %>
    <%# Error message setup %>
    <% if message.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(message.errors.count, "error") %> prohibited this message from being saved:</h2>

        <ul>
        <% message.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
        </ul>
      </div>
    <% end %>

    <%# Form setup %>

    <%# Message Title %>
    <div class="form-group">
      <%= form.label :message_name %>
      <%= form.text_field :message_name, id: :message_message_name, :class=>"form-control" %>
    </div>

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

    <%# Message send time %>
    <div class="form-group">
      <%= form.label :date_and_time_to_send %>
      <%= form.text_field :date_and_time_to_send, id: :message_date_and_time_to_send, :class=>"form-control" %>
    </div>

    <%# Actions to perform %>
    <div class="actions">
      <%= form.submit 'Send Now', :class=>'btn btn-primary btn-block'%>
      <%= form.submit 'Save to Database', :class=>'btn btn-primary btn-block'%>
    </div>
  <% end %>
</div>

我该如何解决这个问题？谢谢

【问题讨论】：

这是一个不针对所需元素的简单案例。您正在将 height 应用于父元素。给.text_form textarea {height: 12.5rem;} 一个机会。重要提示：不需要!important
事情正在发生变化。如果没有height: 12.5rem，下一个字段之间就没有大空间。我也可以应用其他样式。
@AndreiGheorghiu 感谢您的编辑。这样可行。双重选择的原因是我实际选择了框而不是框的外部？

标签： html css ruby-on-rails twitter-bootstrap erb

【解决方案1】：

这是因为您的目标是父元素。试试这个：

.text_form textarea {
  height: 12.5rem;
}

如果您需要有关文本区域元素的更多帮助，请提供资源：https://css-tricks.com/textarea-tricks/

【讨论】：