Question

这是一个非常基本的自举网格：

<div class="row">
  <div class="col-md-12">
  </div>
</div>

<div class="row"> 
  <div class="col-md-4" id="home_form">
    <%= render "supporters/form" %>
  </div>
  <div class="col-md-8" id="home_list" id="home_list">
    <%= render 'supporters/show_supporters' %>
  </div>
</div>

但是我已经得到了这个，之前在表单上方直接放置了一个表单错误，就像常规渲染的rails表单一样有错误。

$(build_error).insertBefore( "#home_form" );

但现在它将它放在左侧，并且与#home_form具有相同的高度，并在两者下面抛出#home_list。

build_error：

<% if @supporter.save %>
        $("#home_list").html("<%= j render 'show_supporters' %>")
        $("home_form").html("<%= j render 'form' %>")
    <% else %>
        $("#home_form").html("<%= j render 'form', supporter: @supporter %>") 
        $('#build_error').remove();
        <% if @supporter.errors.any? %>
          var build_error = "<div class='alert alert-danger' id='build_error'>";
          build_error += "You've got <%= pluralize(@supporter.errors.count, 'error') %>.";
          build_error +=   "<ul id='error_explanation'>";
          <% @supporter.errors.full_messages.each do |msg| %>
            <% if msg === "Ip has already been taken" %>
                <% msg = "You've already posted your support.   Thanks!" %>
            <% end %>
            build_error += "<li><%= j msg %></li>";
          <% end %>
          build_error +=   "</ul>";
          build_error += "</div>";
          $(build_error).insertBefore( "#home_form" );
        <% end %>           
    <% end %>

编辑：

<div class="row"> 
  <div class="col-md-4">
    <div id="home_form">
      <%= render "supporters/form" %>
    </div>
  </div>
  <div class="col-md-8" id="home_list" id="home_list">
    <%= render 'supporters/show_supporters' %>
  </div>
</div>

Answer 1

在build_error之前插入#home_form时，它变为：

<div class="row">
  <div class='alert alert-danger' id='build_error'>...</div>

  <div class="col-md-4" id="home_form">
    <%= render "supporters/form" %>
  </div>
  <div class="col-md-8" id="home_list" id="home_list">
    <%= render 'supporters/show_supporters' %>
  </div>
</div>

你在该元素上没有任何bootstrap .col-类，因此.row负边距会弄乱你的风格。

因此，一种解决方案是在该元素上添加一些.col-类：

var build_error = "<div class='alert alert-danger col-md-12' id='build_error'>";

bootstrap不维护网格

1 个答案: