Question

我正在使用Rails 5和Bootstrap 3来构建应用程序。我希望管理员能够使用Bootstrap 3模式创建和更新用户。

模态和表单正在运行，但存在布局问题。模态的主体和页脚似乎在一起运行。我已经检查过以确保所有的div都已关闭并且它们似乎是关闭的，但是模态的顶部div和它的结束div似乎并不认识对方......

我认为问题在于模态ID。当我删除它时似乎工作正常，这让我相信问题是id中的Ruby（见下文）。

我在模态ID中使用user.id的原因是创建唯一的模态ID，因为有几个用户。

使用Ruby作为ID

的一部分打开Modal Div

<div class="modal fade" id="<%= "update_user#{user.id}" %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
...
</div>

完整模式代码

<div class="modal fade" id="<%= "update_user#{user.id}" %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><text id="pv_text_grn">PATROL</text><text id="pv_text_gry">VAULT</text> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Update <%= user.f_name %> <%= user.l_name %></h4>
      </div>
      <div class="modal-body">
        <%= form_for(user, :method => :put, remote: true) do |f| %>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="row">
            <div class="col-xs-12">
              <div class="field">
                <%= f.label :email, "Email" %><br />
                <%= f.email_field :email, :class => 'form-control' %>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :password %>
                <%= f.password_field :password, autocomplete: "off", :class => 'form-control', :placeholder => '* * * * * *' %>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :password_confirmation %><br />
                <%= f.password_field :password_confirmation, autocomplete: "off", :class => 'form-control', :placeholder => '* * * * * *' %>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :f_name, "First Name" %><br />
                <%= f.text_field :f_name, disabled: true, :class => 'form-control' %>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :l_name, "Last Name" %>
                <%= f.text_field :l_name, disabled: true, :class => 'form-control' %>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="field">
                <%= f.label :primary_tel, "Telephone" %>
                <%= f.text_field :primary_tel, :class => 'form-control' %>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              <div class="field">
                <%= f.label :role_id %><br />
                <%= collection_select(:user, :role_id, Role.all, :id, :name, {prompt: true}) %>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <%= f.submit "Update User", :class => 'btn btn-primary' %>
      </div>
      <% end %>
    </div>
  </div>
</div>

莫代尔的形象

您可以看到应该位于页脚的分界线现在出于某种原因位于电子邮件标签下方的顶部。

Answer 1

您需要删除包装<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">标记。

我也重构了这个结构。您不必使用.col-xs-12包装任何输入，这是输入的默认值。您可以在.form-group中包含输入以获得底部间距。

<div class="modal fade" id="<%= "update_user#{user.id}" %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><text id="pv_text_grn">PATROL</text><text id="pv_text_gry">VAULT</text> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Update <%= user.f_name %> <%= user.l_name %></h4>
      </div>
      <div class="modal-body">
        <%= form_for(user, :method => :put, remote: true) do |f| %>
          <div class="field">
            <%= f.label :email, "Email" %><br />
            <%= f.email_field :email, :class => 'form-control' %>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :password %>
                <%= f.password_field :password, autocomplete: "off", :class => 'form-control', :placeholder => '* * * * * *' %>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :password_confirmation %><br />
                <%= f.password_field :password_confirmation, autocomplete: "off", :class => 'form-control', :placeholder => '* * * * * *' %>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :f_name, "First Name" %><br />
                <%= f.text_field :f_name, disabled: true, :class => 'form-control' %>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :l_name, "Last Name" %>
                <%= f.text_field :l_name, disabled: true, :class => 'form-control' %>
              </div>
            </div>
          </div>
          <div class="field">
            <%= f.label :primary_tel, "Telephone" %>
            <%= f.text_field :primary_tel, :class => 'form-control' %>
          </div>
          <div class="row">
            <div class="col-xs-6">
              <div class="field">
                <%= f.label :role_id %><br />
                <%= collection_select(:user, :role_id, Role.all, :id, :name, {prompt: true}) %>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit "Update User", :class => 'btn btn-primary' %>
        </div>
      <% end %>
    </div>
  </div>
</div>

此外，您应该考虑使用dom_id作为标记ID。它将基于if对象在id前面添加正确的动词。（编辑或新建）并遵循rails命名约定模式。

# Update
dom_id(Post.find(45), :edit) # => "edit_post_45"
dom_id(Post.new, :custom)    # => "custom_post"
# New
dom_id(Post.find(45))       # => "post_45"
dom_id(Post.new)            # => "new_post"

http://api.rubyonrails.org/classes/ActionView/RecordIdentifier.html

您可以将其与content_tag一起使用或嵌入html标记。

<%= content_tag :div, id: dom_id(user) do %>...<% end %>
<div id="<%= dom_id user %>">...</div>

PS：还有dom_class。

Answer 2

我找到了另一种创建和解决此问题的方法。

我正在使用以下代码：

<form method="post" action="/api/foo">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">My Modal</h4>
  </div>

  <div class="modal-body">
    <input type="hidden" class="changed" name="key_str" value="{{ machine.key_str }}"/>

    <div class="row">
      <div class="form-group col-lg-12">
        <label>Text input 1</label>
        <input type="text" class="form-control"/>
      </div>
    </div>

    <div class="row col-lg-12">
      <label>Checkbox</label>
      <input type="checkbox" />
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

创建了此模式：

将row类移动到自己的<div>可以解决此问题：

<div class="row">
  <div class="col-lg-12">
    <label>Checkbox</label>
    <input type="checkbox" />
  </div>
</div>

Bootstrap 3模态布局问题

使用Ruby作为ID

完整模式代码

莫代尔的形象

2 个答案: