Question

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

<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>

Answer 1

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

此处您已手动将样式添加为display：none。而不是尝试使用bootstrap类。 e.g。

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

Answer 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');
});

不知道为什么会这样。

Twitter Bootstrap模式：输入是不可见的

2 个答案: