Twitter Bootstrap 模态：输入是不可见的答案

【问题标题】：Twitter Bootstrap modals: inputs are invisibleTwitter Bootstrap 模态：输入是不可见的
【发布时间】：2013-08-08 04:51:37
【问题描述】：

这段代码有什么问题？没有输入显示，但模态页脚中的按钮会显示。知道这里发生了什么吗？

<div class="modal" style="display: none;" id="customArticleModal">
  <div class="modal-header">
    <h3>Add your own article</h3>
  </div>
  <%= form_for(@custom_article) do |f| %>
    <div class="modal-body">
      <%= f.text_field :name %>
      <%= f.text_field :description %>
    </div>
    <div class="modal-footer">
      <%= f.submit "Create", :class => 'btn btn-primary' %>
    </div>
  <% end %>
</div>

编辑

这是渲染的源代码：

<div class="modal hide fade" id="customArticleModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>Add your own article</h3>
  </div>
  <form accept-charset="UTF-8" action="/components" class="new_component" enctype="multipart/form-data" id="new_component" method="post">
    <div class="modal-body">
      <input id="component_name" name="component[name]" size="30" type="text" />
      <input id="component_description" name="component[description]" size="30" type="text" />
    </div>
    <div class="modal-footer">
      <input class="btn btn-primary" name="commit" type="submit" value="Create article" />
    </div>  
  </form>
</div>

【问题讨论】：

你是否在触发modal的元素中添加了data-toggle="modal"？
您的问题标题引用了 Bootstrap，但我相信这与服务器端代码而不是客户端有关 - Bootstrap 是。渲染的 HTML 是什么？
这是一个客户端问题。尽管呈现的 HTML 表明它们是，但输入不会呈现。它们只是以某种方式隐藏起来。
请在页面上显示渲染的html。
查看更新的问题。

标签： ruby-on-rails ruby-on-rails-3 twitter-bootstrap

【解决方案1】：

<div class="modal" style="display: none;" id="customArticleModal">

在这里，您手动添加了样式为 display: none。而不是尝试使用引导类。例如

<div class="modal hide fade" id="customArticleModal">

【讨论】：

这没什么区别：jQuery 会覆盖它。没有显示模式的是 in 的输入。
ohho.. 问题：在显示模式时，您的样式是否更改为“显示：阻止”？
是的，它变成了display: block;。

【解决方案2】：

我写了一点 jQuery 来覆盖 Bootstrap 在这里所做的一切。

$(document).ready(function() {
  $('#custom_article_form .control-group .controls input').css('display', 'block');
  $('#custom_article_form .control-group .controls textarea').css('display', 'block');
});

不知道为什么会这样。

【讨论】：