Rails形成溢出Bootstrap 3模态对话框的输入字段

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

更新视图，如下所示

<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

  

单个表单控件自动接收一些全局样式。   所有文字<input>, <textarea>, and <select>元素都带有   .form-control设置为width：100％;默认情况下。

Answer 2

我用以下内容覆盖了bootstrap_config.css.scss：

input{ width:100%;}它解决了它。