引导不维持电网

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> 

但是我这有，这在以前直接放置像一个普通的渲染轨有错误形成上述表单格式错误。

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

而且你没有任何引导.col-类该元素，所以.row负边距是搞乱你的风格。

所以，一个解决办法是添加元素的一些.col-类：

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