javascript - 使用 Bootstrap 3 模态对话框溢出的 Rails 表单输入字段

Question

我正在使用 simple_form gem 在模态对话框中制作表单。问题是输入字段超出了模式的边缘。

代码级联如下:index.html.erb

<div class="row">
 <div class="cold-md-2">
    <%= link_to "New Author", new_author_path, remote: true, class: "btn btn-primary"%>
 </div>
 <div id="author-modal" class="modal fade" role="dialog"></div>
</div>

new.js.erb

 $('#author-modal').html('<%= escape_javascript(render 'new') %>');
 $('#author-modal').modal('show');

_new.html.erb

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-body">
        <h4 class="modal-title" id="myModalLabel">Add New Author</h4>
        <%= render 'form'%>
    </div>
</div>
</div>

最后是_form.html.erb

 <%= simple_form_for @author, remote: true, html: { class: "form-horizontal" } do |f|%>
 <div class="modal-body">
<ul class="errors"></ul>
<div class="form-group">
    <%= f.input :first_name %>
    <%= f.input :last_name %>
    <%= f.input :title %>
</div>
</div>
<div class="modal-footer">
<%= f.button :submit, class: "btn btn-primary" %>
<%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"}%>
</div>

 <% end %>

为什么表单项的 bootstrap 默认 100% 宽度不限于模态？

Answer 1

如下更新 View ，

<div class="form-group">
    <%= f.input :first_name, input_html: { class: "form-control" } %>
    <%= f.input :last_name, input_html: { class: "form-control" } %>
    <%= f.input :title, input_html: { class: "form-control" } %>
</div>

对于 width: 100% , 你应该使用 form-control输入控件的类。

引用 Forms Basic Example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.